全局變量的幾種實現方式

注:本文僅對這幾種方式進行簡短的闡述,作爲記錄。

我們在寫代碼時免不了要對一些變量進行一些存儲,但有時這些變量或常量使用到的頻率又非常高,不論從優化代碼解決冗餘還是少給自己添不必要的麻煩看,把這些重複的變量進行統一存儲和管理是必要的。

1.公用模塊

定義一個專用的模塊,如在項目裏common目錄下建立一個heip.js的文件用來定義方法,然後在其他界面引入該模塊或去該公用方法(可對不同的方法選擇性進行引入)。

如:import {getToken} from "./global";

2.掛載Vue.prootype

將一些使用頻率高的常量或方法,直接拓展到Vue.prototype上,每個Vue對象都會繼承下來。然後在main.js中掛載。

import {jumpTo,isWx} from './units/global';
Vue.prototype.jumpTo = jumpTo
Vue.prototype.isWx = isWx
這樣的話就可以在其他界面直接調用就可以使用了。
 
3.globalData
小程序裏的globalData概念,在APP上全局聲明變量一次,會繼承到全局所有界面。
如:賦值:getApp().globalData.text = 'test';取值:console.log(getApp().globalData.text) // 'test'。
 
4.Vuex
vuex作爲專爲vue.js應用程序開發的狀態管理模式,它採用集中存儲管理應用的所有組件的狀態。
實際使用:
  在根目錄下新建store目錄,在store目錄下創建index.js定義狀態值,然後在main.js掛載Vuex。
  main.js:
  imoprt store from ‘./store’
  
  new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
  })

一次奧迪

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章