ホームページ >ウェブフロントエンド >jsチュートリアル >VUE でグローバル変数を定義するいくつかの方法の詳細な説明
最近、VUE.jsを学習していると、JSグローバル変数がVUEのグローバル変数というよりも、モジュラーJS開発のグローバル変数に関わってきます。
1. グローバル変数特殊モジュール
は、特定のモジュールを使用して、参照が必要な場所にモジュールをインポートするだけです。
グローバル変数用の特別なモジュール Global.vue
<script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59', '#FFAF60', '#FFDC35', '#FFFF37', '#B7FF4A', '#28FF28', '#1AFD9C', '#00FFFF', '#2894FF', '#6A6AFF', '#BE77FF', '#FF77FF', '#FF79BC', '#FF2D2D', '#ADADAD' ] const colorListLength = 20 function getRandColor () { var tem = Math.round(Math.random() * colorListLength) return colorList[tem] } export default { colorList, colorListLength, getRandColor } </script>
モジュール内の変数は、他の場所で使用する必要がある場合に、グローバル モジュールを導入するだけで公開されます。
グローバル変数モジュール html5.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> <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 を使用する必要があります。 グローバル変数モジュールは Vue.prototype に実装されています。
Global.jsは上記と同じです
import global_ from './components/tool/Global' Vue.prototype.GLOBAL = global_
プログラム入口のmain.jsに以下のコードを追加します。グローバル変数を参照する必要があるモジュールでグローバルモジュールをインポートする必要はありません。次のように、これを直接使用して参照できます:
<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>
3. VUEX を使用する
Vuex は、Vue.js アプリケーション用に特別に開発された状態管理モデルです。集中ストレージを使用して、アプリケーションのすべてのコンポーネントの状態を管理します。したがって、グローバル変数を格納することができます。 Vuex はちょっと面倒なので、やりすぎな気がします。必要ないと思います。
以上がVUE でグローバル変数を定義するいくつかの方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。