VUEグローバル変数のいくつかの実施形態

1、グローバル変数専用モジュール
この大域変数を一つのモジュール（js or vue）で管理し、モジュール内の変数はexport（最もよく導出されたフォーマットを対象として、他のところで起動しやすい）で暴露し、他のところで使用する必要がある場合、importでモジュールを導入するという意味です。
グローバル変数専用モジュール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
}

モジュール内の変数は出口で露出します。他のところで使う必要がある時はモジュールを世界に導入すればいいです。
グローバル変数が必要なモジュールhtml 5.vue

<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: '    '
    },
    {
     id: 2,
     img: require('../../assets/rankIndex.png'),
     title: '  '
    }
   ]
  }
 }
}
</script>

2、グローバル変数モジュールはVue.prototypeにマウントされます。
Global.jsは同じで、プログラムの入り口のmain.jsリガの下のコードです。

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

マウント後、グローバル量を参照する必要があるモジュールでは、グローバル量モジュールを導入しなくても、直接にthisを使って参照できます。

<script type="text/javascript">
export default {
data () {

return {
 getColor: this.GLOBAL.getRandColor,
 mainList: [
  {
   id: 1,
   img: require('../../assets/rankIcon.png'),
   title: '    '
  },
  {
   id: 2,
   img: require('../../assets/rankIndex.png'),
   title: '  '
  }
 ]
}
}
}
</script>

1と2の違いは、必要に応じてグローバルモジュールファイルを導入しなくてもいいことです。
3、vuex
VuexはVue.jsアプリケーションのために開発された状態管理モードです。これは、集中型記憶管理アプリケーションのすべてのコンポーネントの状態を採用しています。したがって、全体の量を保存することができます。Vuexはちょっとくどいので、鶏肉を殺して牛刀を使う感じがします。必要はないと思います。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。