uni-app 全局變量實現的4種方式

時間 2019-11-06

標籤 uni app 全局變量實現方式简体版

原文原文鏈接

1、公用模塊

定義一個專用的模塊，用來組織和管理這些全局的變量，在須要的頁面引入。javascript

注意：這種方式只支持多個vue頁面或多個nvue頁面之間公用，vue和nvue之間不公用。css

示例以下：在 uni-app 項目根目錄下建立 common 目錄，而後在 common 目錄下新建 base.js 用於定義公用的方法。vue

const websiteUrl = 'http://www.javanx.cn';  
const now = Date.now || function () {  
  return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
  return obj instanceof Array;  
};  

export default {  
  websiteUrl,  
  now,  
  isArray  
}
複製代碼

接下來在 pages/index/index.vue 中引用該模塊java

<script>  
import helper from '/common/base.js';  

export default {  
  data() {  
    return {};  
  },  
  onLoad(){  
    console.log('now:' + helper.now());  
  },  
  methods: {  
  }  
}  
</script>
複製代碼

這種方式維護起來比較方便，可是缺點就是每次都須要引入。web

2、掛載 Vue.prototype

將一些使用頻率較高的常量或者方法，直接擴展到 Vue.prototype 上，每一個 Vue 對象都會「繼承」下來。

注意這種方式只支持多個vue頁面或多個nvue頁面之間公用，vue和nvue之間不公用。vuex

示例以下：在 main.js 中掛載屬性/方法小程序

Vue.prototype.websiteUrl = 'http://www.javanx.cn';  
Vue.prototype.now = Date.now || function () {  
  return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
  return obj instanceof Array;  
}; 
複製代碼

而後在 pages/index/index.vue 中調用app

<script>  
export default {  
  data() {  
    return {};  
  },  
  onLoad(){  
    console.log('now:' + this.now());  
  },  
  methods: {  
  }  
}  
</script>  
複製代碼

這種方式，只須要在 main.js 中定義好便可在每一個頁面中直接調用。ide

注意： 一、每一個頁面中不要在出現重複的屬性或方法名。post

二、建議在 Vue.prototype 上掛載的屬性或方法，能夠加一個統一的前綴。好比 $url、global_url 這樣，在閱讀代碼時也容易與當前頁面的內容區分開。

3、globalData

小程序中能夠在 App 上聲明全局變量，但在 Vue 中沒有，uni-app 中在 App.vue 能夠定義在 globalData 屬性上，也可使用 API 讀寫這個值。

這個方式支持vue和nvue共享數據。是目前nvue和vue共享數據的一種比較好的方式。

定義：App.vue

<script>  
export default {  
  globalData: {  
    text: 'text'  
  },  
  onLaunch: function() {  
    console.log('App Launch')  
  },  
  onShow: function() {  
    console.log('App Show')  
  },  
  onHide: function() {  
    console.log('App Hide')  
  }  
}  
</script>  

<style>  
  /*每一個頁面公共css */  
</style>
複製代碼

js中操做globalData的方式以下：

賦值：

getApp().globalData.text = 'test'
複製代碼

取值：

console.log(getApp().globalData.text)
// test
複製代碼

若是須要把globalData的數據綁定到頁面上，可在頁面的onshow聲明週期裏進行變量重賦值。HBuilderX 2.0.3起，nvue頁面在uni-app編譯模式下，也支持onshow。

4、Vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

注意這種方式只支持多個vue頁面或多個nvue頁面之間公用，vue和nvue之間不公用。

這裏以登陸後同步更新用戶信息爲例，簡單說明下 Vuex 的用法，更多更詳細的 Vuex 的內容，建議前往其官網 Vuex 學習下。

舉例說明：

在 uni-app 項目根目錄下新建 store 目錄，在 store 目錄下建立 index.js 定義狀態值

const store = new Vuex.Store({  
  state: {  
    login: false,  
    token: '',  
    avatarUrl: '',  
    userName: ''  
  },  
  mutations: {  
    login(state, provider) {  
      console.log(state)  
      console.log(provider)  
      state.login = true;  
      state.token = provider.token;  
      state.userName = provider.userName;  
      state.avatarUrl = provider.avatarUrl;  
    },  
    logout(state) {  
      state.login = false;  
      state.token = '';  
      state.userName = '';  
      state.avatarUrl = '';  
    }  
  }  
}) 
複製代碼

而後，須要在 main.js 掛載 Vuex

import store from './store'  
Vue.prototype.$store = store  
複製代碼

最後，在 pages/index/index.vue 使用

<script>  
import {  
  mapState,  
  mapMutations  
} from 'vuex';  

export default {  
  computed: {  
    ...mapState(['avatarUrl', 'login', 'userName'])  
  },  
  methods: {  
    ...mapMutations(['logout'])  
  }  
}  
</script>  
複製代碼

詳細示例，請下載附件，在 HBuilderX 中運行。

示例操做步驟：未登陸時，提示去登陸。跳轉至登陸頁後，點擊「登陸」獲取用戶信息，同步更新狀態後，返回到我的中心便可看到信息同步的結果。

注意：對比前面的方式，該方式更加適合處理全局的而且值會發生變化的狀況。

更多VUEX學習，請點擊