最近在學(xué)習(xí)VUE.js 中間涉及到JS全局變量，與其說是VUE的全局變量，不如說是模塊化JS開發(fā)的全局變量。
1、全局變量專用模塊
就是以一個(gè)特定模塊來組織管理這些全局量，需要引用的地方導(dǎo)入該模塊便好。
全局變量專用模塊 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 = 20function getRandColor () { var tem = Math.round(Math.random() * colorListLength) return colorList[tem]}export default{ colorList, colorListLength, getRandColor}</script>模塊里的變量用export 暴露出去，當(dāng)其它地方需要使用時(shí)，引入模塊global便可。
需要使用全局變量的模塊 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">  <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同上，在程序入口的main.js里加下面代碼
import global_ from './components/tool/Global'Vue.prototype.GLOBAL = global_
掛載之后，在需要引用全局量的模塊處，不需再導(dǎo)入全局量模塊，直接用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>3、使用VUEX
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)。因此可以存放著全局量。因Vuex有點(diǎn)繁瑣，有點(diǎn)殺雞用牛刀的感覺。認(rèn)為并沒有必要。
鏈接：vuex官方介紹
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
