How to set global variables in vue2? (detailed tutorial)

Below I will share with you an article on how to set vue2 global variables. It has a good reference value and I hope it will be helpful to everyone.

Recently, while learning VUE.js, JS global variables are involved. Rather than being VUE’s global variables, it is better to say they are global variables for modular JS development.

1. Special module for global variables

uses a specific module to organize and manage these global variables. You can import this module wherever you need to reference it. good.

Special module for global variables Global.vue

<script type="text/javascript">
const colorList = [
 &#39;#F9F900&#39;,
 &#39;#6FB7B7&#39;,
 &#39;#9999CC&#39;,
 &#39;#B766AD&#39;,
 &#39;#B87070&#39;,
 &#39;#FF8F59&#39;,
 &#39;#FFAF60&#39;,
 &#39;#FFDC35&#39;,
 &#39;#FFFF37&#39;,
 &#39;#B7FF4A&#39;,
 &#39;#28FF28&#39;,
 &#39;#1AFD9C&#39;,
 &#39;#00FFFF&#39;,
 &#39;#2894FF&#39;,
 &#39;#6A6AFF&#39;,
 &#39;#BE77FF&#39;,
 &#39;#FF77FF&#39;,
 &#39;#FF79BC&#39;,
 &#39;#FF2D2D&#39;,
 &#39;#ADADAD&#39;
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}
</script>

The variables in the module are exposed through export. When they need to be used elsewhere, just introduce the module global.

Modules that need to use global variables html5.vue

<template>
 <ul>
  <template v-for="item in mainList">
   <p class="projectItem" :style="&#39;box-shadow:1px 1px 10px &#39;+ getColor()">
     <router-link :to="&#39;project/&#39;+item.id">
      ![](item.img)
      <span>{{item.title}}</span>
     </router-link>
   </p>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global_ from &#39;components/tool/Global&#39;
export default {
 data () {
  return {
   getColor: global_.getRandColor,
   mainList: [
    {
     id: 1,
     img: require(&#39;../../assets/rankIcon.png&#39;),
     title: &#39;登录界面&#39;
    },
    {
     id: 2,
     img: require(&#39;../../assets/rankIndex.png&#39;),
     title: &#39;主页&#39;
    }
   ]
  }
 }
}
</script>
<style scoped type="text/css">
.projectItem
{
 margin: 5px;
 width: 200px;
 height: 120px;
 /*border:1px soild;*/
 box-shadow: 1px 1px 10px;
}
.projectItem a
{
 min-width: 200px;
}
.projectItem a span
{
 text-align: center;
 display: block;
}
</style>

2. Mount the global variable module into Vue.prototype.

Same as above for Global.js, add the following code to main.js at the program entrance

import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_

After mounting, in the module that needs to reference the global variable, there is no need to Import the global module and reference it directly using this, as follows:

<script type="text/javascript">
export default {
 data () {
  return {
   getColor: this.GLOBAL.getRandColor,
   mainList: [
    {
     id: 1,
     img: require(&#39;../../assets/rankIcon.png&#39;),
     title: &#39;登录界面&#39;
    },
    {
     id: 2,
     img: require(&#39;../../assets/rankIndex.png&#39;),
     title: &#39;主页&#39;
    }
   ]
  }
 }
}
</script>

3. Use VUEX

Vuex is a tool specially designed for Vue State management patterns for .js application development. It uses centralized storage to manage the state of all components of the application. Therefore, global variables can be stored. Because Vuex is a bit cumbersome, it feels like overkill. I don't think it's necessary.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue’s routing dynamic redirection and navigation guard examples

JS implements adding event operations for dynamically created elements Example

Introduction to the calling sequence of functions in vue

The above is the detailed content of How to set global variables in vue2? (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!