ホームページ > 記事 > ウェブフロントエンド > vue2でグローバル変数を設定するにはどうすればよいですか? (詳細なチュートリアル)
ここで、vue2 グローバル変数の設定方法に関する記事を共有します。この記事は参考になるので、皆さんのお役に立てれば幸いです。
最近、VUE.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"> <p class="projectItem" :style="'box-shadow:1px 1px 10px '+ getColor()"> <router-link :to="'project/'+item.id"> ![](item.img) <span>{{item.title}}</span> </router-link> </p> </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>
グローバル変数を参照する必要があるモジュールでグローバルモジュールをインポートする必要はありません次のように、これを直接使用して参照できます: rrreee3. VUEX を使用する
Vuex は、Vue.js アプリケーション専用に開発された状態管理モデルです。集中ストレージを使用して、アプリケーションのすべてのコンポーネントの状態を管理します。したがって、グローバル変数を格納することができます。 Vuex はちょっと面倒なので、やりすぎな気がします。必要ないと思います。
上記は私があなたのためにまとめたものです。
Vueのルーティング動的リダイレクトとナビゲーションガードの例 動的に作成された要素にイベント操作を追加するJS実装例 Vueの関数呼び出しシーケンスの紹介🎜🎜以上がvue2でグローバル変数を設定するにはどうすればよいですか? (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。