1. Global variable special module It means that a module (js or vue) is used to manage this set of global variables. The variables in the module are exposed by export (the best export format is object, which is convenient to call in other places). When other places need to use it, import the module with import

Global variable specific module Global.vue

const colorList = [
 '#F9F900',
 '#6FB7B7',
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}
//Front end full stack learning communication circle: 866109386
//For front-end developers with 1-3 years of experience
//Help to break through technical bottleneck and improve thinking ability

The variables in the module are exposed by export. When other places need to use them, the global module can be introduced.

Module html5.vue requiring global variables

<template>
 <ul>
  <template v-for="item in mainList">
   <div class="projectItem" :style="'box-shadow:1px 1px 10px '+ getColor()">
     <router-link :to="'project/'+item.id">
      ![](item.img)
      <span>{{item.title}}</span>
     </router-link>
   </div>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global from 'components/tool/Global'
export default {
 data () {
  return {
   getColor: global.getRandColor,
   mainList: [
    {
     id: 1,
     img: require('../../assets/rankIcon.png'),
     title: 'Login interface'
    },
    {
     id: 2,
     img: require('../../assets/rankIndex.png'),
     title: 'homepage'
    }
   ]
  }
 }
}
</script>

2. Mount the global variable module to Vue.prototype

As for Global.js, add the following code in main.js of the program entry

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

After mounting, you do not need to import the global quantity module where you need to reference the global quantity module. You can directly use this to reference, as follows:

<script type="text/javascript">
export default {
data () {
 
return {
 getColor: this.GLOBAL.getRandColor,
 mainList: [
  {
   id: 1,
   img: require('../../assets/rankIcon.png'),
   title: 'Login interface'
  },
  {
   id: 2,
   img: require('../../assets/rankIndex.png'),
   title: 'homepage'
  }
 ]
}
}
}
</script>
//Front end full stack learning communication circle: 866109386
//For front-end developers with 1-3 years of experience
//Help to break through technical bottleneck and improve thinking ability

The difference between 1 and 2 is that 2. When you do not need to import the global module file as required

3,vuex

Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application. So it can store the global quantity. Because vuex is a little cumbersome, a little bit of killing chicken with a bull knife. Think it's not necessary.