VUE 全局變量的幾種實(shí)現(xiàn)方式

更新時(shí)間：2018年08月22日 10:07:13 作者：夏有喬木

這篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1、全局變量專用模塊

意思是說(shuō)，用一個(gè)模塊（js or vue）管理這套全局變量，模塊里的變量用export （最好導(dǎo)出的格式為對(duì)象，方便在其他地方調(diào)用）暴露出去，當(dāng)其它地方需要使用時(shí)，用import 導(dǎo)入該模塊

全局變量專用模塊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
}

模塊里的變量用出口暴露出去，當(dāng)其它地方需要使用時(shí)，引入模塊全球便可。

需要使用全局變量的模塊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: '主頁(yè)'
    }
   ]
  }
 }
}
</script>

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: '主頁(yè)'
  }
 ]
}
}
}
</script>

1和2的區(qū)別在于：2不用在用到的時(shí)候必須按需導(dǎo)入全局模塊文件

3、vuex

Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)。因此可以存放著全局量。因?yàn)閂uex有點(diǎn)繁瑣，有點(diǎn)殺雞用牛刀的感覺(jué)。認(rèn)為并沒(méi)有必要。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue 點(diǎn)擊展開(kāi)顯示更多(點(diǎn)擊收起部分隱藏)
這篇文章主要介紹了vue 點(diǎn)擊展開(kāi)顯示更多(點(diǎn)擊收起部分隱藏)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue指令中的v-once用法
這篇文章主要介紹了vue指令中的v-once用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue 解決provide和inject響應(yīng)的問(wèn)題
這篇文章主要介紹了vue 解決provide和inject響應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue axios 簡(jiǎn)單封裝以及思考
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要介紹了vue axios 簡(jiǎn)單封裝以及思考 ,需要的朋友可以參考下
2018-10-10
Vue 打包后相對(duì)路徑的引用問(wèn)題
這篇文章主要介紹了VUE 打包后相對(duì)路徑的引用問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue項(xiàng)目之安裝引入使用vconsole方式(生產(chǎn)環(huán)境不顯示)
在Vue2開(kāi)發(fā)中,引入vConsole可以為移動(dòng)端提供類似瀏覽器F12的調(diào)試工具,支持查看日志、網(wǎng)絡(luò)請(qǐng)求等功能,vConsole是一個(gè)輕量、可拓展的前端調(diào)試面板,與框架無(wú)關(guān),適用于多種前端框架,安裝方法包括npm和CDN兩種,可根據(jù)項(xiàng)目環(huán)境配置是否顯示調(diào)試面板
2024-10-10
vue-cli3 DllPlugin 提取公用庫(kù)的方法
這篇文章主要介紹了vue-cli3 DllPlugin 提取公用庫(kù) ,需要的朋友可以參考下
2019-04-04
vue cli3.0 引入eslint 結(jié)合vscode使用
這篇文章主要介紹了vue cli3.0 引入eslint 結(jié)合vscode使用，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)
在vue項(xiàng)目中我們經(jīng)常遇到圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于如何基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07