詳解uniapp的全局變量實現方式

Posted on by

前言

本文整理瞭一些uniapp全局變量的實現方式，細節知識來自於uView官網中對uniapp中的全局變量實現，感興趣的同學可以前往uView官網搜索vuex進行查看

全局變量的實現方式

一般來說在uniapp中有以下幾種方式

  • 本地存儲
  • 配置文件
  • 掛載到 Vue.prototype
  • globalData
  • vuex

下面對這5種方式的實現進行介紹

本地存儲

永久存儲，以app為例即使該應用被關閉，該數據依然會被存儲

這是一種永久的存儲方式，類似於web的Local Storage(有關於Cookie、Token、SessionStorage、LocalStorage,會整理在另一篇文章中)，當我們需要永久存儲用戶的某一信息時會使用這種方法，但是需要註意使用這種方式需要避免對存儲數據的頻繁獲取和修改操作，因為會對性能產生一定的影響，應用聲明周期內的變量，不應該使用此種方式

這種存儲方式有 同步和異步兩種

同步存儲 

  //同步存儲
  uni.setStorageSync("key","value")
  //同步獲取
  let value = uni.getStorageSync("key")  
  console.log("我會等到上邊執行完畢後才會執行)

異步存儲 

  uni.setStorage({
   key:"key",
    data:"value",
    success:function(){
      //存儲成功的回調
      console.log("我是異步存儲的回調，我會在val聲明後被執行")
    }
  })
  let val = 1//這行會先執行
  
  uni.getStorage({
   key:"key",
    success:function(res){
      //存儲成功的回調
      console.log("我是異步獲取的回調，我會在val2聲明後被執行")
    }
  })
  let val2 = 2//這行會先執行

配置文件

這是一種利用模塊化文件導出實現的方式，先將變量寫在js文件中，然後通過export default的形式導出使用

一般來說使用這種方式實現的全局變量，是需要在應用被用戶安裝之前到用戶卸載時都必須使用的變量，如向後端請求的域名，其他的情況不太適用這種方式，同時這種方式也有弊端，就是每次使用都需要引入文件

config.js 

  //如在config.js中 我們導出瞭一個基礎域名
  export default{
   baseUrl:"http://www.test.com"
  }

index.js 

  //通過import引入這個文件
  import config from "../common/config.js"
  export default {
    onLoad(){
     console.log(config.baseUrl)//baseUrl:"http://www.test.com"
    }
  }

掛載到Vue.prototype

這是一種利用原型的實現方式（有關於js的原型鏈和繼承，會在整理在另一篇文章中），但是這種方式在微信小程序上會有特殊表現

註意:在微信小程序中 模板無法直接讀取展示引入的全局變量
main.js 

  //這裡的config.js參照上文已經寫好的文件
  import config from "./common/config.js"
  //將baseUrl掛載到Vue上，此後在頁面和組件中就可以通過this.baseUrl的方式去訪問
  Vue.prototype.baseUrl = config.baseUrl

頁面中 

<template>
 <!-- 微信小程序中值為undefined，其他端有效 -->
 <view>
 值為：{{this.baseUrl}}
 </view>
</template>

<script>
 export default {
 onLoad() {
    console.log(this.baseUrl)//"http://www.test.com"
 }
 }
</script>

globalData

這種方式是微信小程序特有的，小程序無法使用vuex因此出現瞭globalData，uniapp是小程序另一種實現因此也出現瞭globalData

使用globalData有以下幾點需要註意的地方：

  • globalData不是響應式的，一個文件中對globalData的修改，不會動態的在另一個文件中響應
  • 如果想實現globalData的”響應”，你需要在onShow的生命周期中手動獲取值

對第二點進行解釋，為什麼需要在onShow裡去獲取值onLoad不行麼？

因為如果A、B頁面都引入瞭globalData，B在頁面內部修改瞭globalData的值返回A頁面，此時A頁面沒有被銷毀不會調用onLoad生命鉤子，隻會執行onShow此時在onLoad裡去獲取globalData，那麼是不會執行的，也就無法做到響應式

App.vue 

  export default{
   //需要在App.vue中去定義globalData
   globalData:{
     userName:"白居易"
    },
    //這裡需要註意，如果想要在App.vue中使用globalData，不能直接使用getApp().globalData.Name，因為此時getApp()未有生成
    // 1. 非V3模式，可以通過this.$scope.globalData獲取
   // 2. V3模式，可以通過getApp({allowDefault: true}).globalData獲取
    onLaunch(){
     console.log(this.$scope.globalData.userName)
    }
  }

當在App.vue中定義好globalData後我們就可以在頁面中使用瞭
A.vue 

<template>
 <view>
 <view>
  <!-- 註意，不能在模板中直接使用 getApp().globalData.userName -->
  <<賣炭翁>>的作者是：{{author}}
 </view>
 <view>
  <u-button @click="modifyUserName">修改userName值</u-button>
 </view>
 </view>
</template>

<script>
 export default {
 data() {
  return {
  author: ''
  }
 },
 onShow() {
  // 每次A.vue出現在屏幕上時，都會觸發onShow，從而更新author值
  this.author = getApp().globalData.userName;
 },
 methods: {
  modifyUserName() {
                //此時修改瞭globalData的值
  getApp().globalData.userName = "詩聖"；
  // 修改userName後，本頁的author依然不會自動刷新，因為globalData不是響應式的
  // 我們仍然需要手動刷新本頁的author值，由此可見globalData的弊端
  this.author = getApp().globalData.userName;
  }
 }
 }
</script>

Vuex的實現方式

強烈建議使用vuex的方式，在uniapp使用vuex有兩種方式，一種是基於傳統vue的方式，一種是uView封裝後的方式，下面介紹uView官網對vuexd的封裝

傳統實現方式

傳統vuex的使用方式，這裡隻做簡單介紹,如果對vuex不瞭解的同學，可以去vue官網查看官方文檔

在uni.app的根目錄下創建一個store文件，並在其中創建一個index.js文件 內容如下

//index.js
  import Vue from "vue"
  import Vuex from "vuex"
  Vue.use(Vuex)
  const store = new Vuex.Store({
   state:{
     vuex_token:"123456"
    },
    //同步修改 state 中值的方法
    mutations:{
     //payload使用戶在使用mutations是傳入的參數，可以使單一值也可以是對象
     modifyToken(state,payload){
       state.vuex_token = payload.token
      }
    }
  })
  export default store

在main.js中引入

import store from '@/store';

// 將store放入Vue對象創建中
const app = new Vue({
 store,
 ...App
})

在頁面中使用

<template>
 <view>
 <view>
  Token值為{{vuex_token}}
 </view>
 <u-button @click="btnClick">修改vuex_token</u-button>
 </view>
</template>

<script>
//這是Vue官方為瞭更方便使用store提供的api，詳情可以去Vue官方查看文檔
import {mapState, mapMutations} from 'vuex'; 
export default {
 computed: { 
 ...mapState(['vuex_token']) 
 }, 
 methods: { 
 ...mapMutations(['modifyToken']),
 btnClick() {
  // 這裡第二個參數可以普通變量或者對象，自定義的，根據mutations需求處理（不使用mapMutations的方式）
  this.$store.commit('modifyToken', {token: 'xxxyyyzzz'}
            //使用mapMutations的方式
            this.modifyToken({token: 'xxxyyyzzz'})
 }
 } 
}
</script>

uView的vuex實現方式(重點)

首說為什麼uView對vuex進行瞭封裝，原因有以下兩點

  • uView覺得需要在vuex中定義state和mutations，在每個需要用到vuex的地方都需要引入mapState進行解構，然後再次使用（操作繁瑣）
  • 因為vuex是將變量保存在內存中的，刷新瀏覽器就會導致vuex變量消失，一般還需要配合其他的存儲方式進行使用如LocalStorage

針對這些問題uView官方提供瞭自己封裝使用vuex的一套方法，這個方法結合LocalStorage、vuex，使得用戶不必再去繁瑣的調用vuex和考慮刷新丟失的問題，下面我將代碼展示，並將其思路和過過程解釋

  • 先在根目錄下創建一個index.js文件，寫入以下內容，開頭我會先提供大致思路具體含義之後會在註釋中解釋

思路：index.js的大致思路如下

a. 為瞭解決vuex刷新丟失無法永久存儲數據的問題，創建瞭一個lifeData對象，這個對象會通過函數，將其存儲在LocalStorage中，以達到永久保存的效果，此時我隻需要將vuex中需要永久保存的數據，以key、value的形式存儲在這個對象中就可以瞭

b. 為瞭解決每次使用vuex都需要使用mutations中的函數去操作對應的stroe中的變量,封裝瞭$uStore這一個方法去操作所有的store中的變量，當然隻進行瞭簡單的復制操作，對於更拓展的功能，用戶可以自己在mutations中去封裝函數進行拓展

c. 封裝一個saveStateKeys數組，這個數組的數據會在app啟動時就會被取出，因此我們可以把一些需要app啟動時就獲取的數據放在其中，如應用中上次用戶已經登陸的信息，實際上saveStateKeys和lifeData是配合使用的，隻有存在saveStateKeys中的變量，才會在存儲時被存儲在lifeData中以達到永久的存儲，其他的就和普通vuex存儲方式一樣，對於這點我們可以在下述代碼中看到 

//引入Vuex、vue 使用Vuex,這一步和一般使用vuex沒有區別
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//創建一個變量，這個變量用於存儲需要永久存儲的數據
let lifeData = {};

try{
  // 嘗試獲取本地是否存在lifeData變量，第一次啟動APP時是不存在的
  lifeData = uni.getStorageSync('lifeData');
}catch(e){
 
}

// 需要永久存儲，且下次APP啟動需要取出的，在state中的變量名
let saveStateKeys = ['vuex_user', 'vuex_token'];

// 保存變量到本地存儲中（達到刷新/重啟（app不存在刷新，app隻會重啟）不丟失）
const saveLifeData = function(key, value){
 // 判斷變量名是否在需要存儲的數組中
  //這一條就是在判斷如果變量名存儲在saveStateKeys中，那麼就將其存儲在lifeData中達到永久存儲，否則就和一般vuex的存儲方式一樣
 if(saveStateKeys.indexOf(key) != -1) {
 // 獲取本地存儲的lifeData對象，將變量添加到對象中
 let tmp = uni.getStorageSync('lifeData');
 // 第一次打開APP，不存在lifeData變量，故放一個{}空對象
 tmp = tmp ? tmp : {};
 tmp[key] = value;
 // 執行這一步後，所有需要存儲的變量，都掛載在本地的lifeData對象中
 uni.setStorageSync('lifeData', tmp);
 }
}
const store = new Vuex.Store({
 // 下面這些值僅為示例，使用過程中請刪除
 state: {
 // 如果上面從本地獲取的lifeData對象下有對應的屬性，就賦值給state中對應的變量
 // 加上vuex_前綴，是防止變量名沖突，也讓人一目瞭然 
 // 被永久存儲的數據會從lifeData中去獲取，因為lifeData已經存儲在瞭本地中
 vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '明月'},
 vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
 // 如果vuex_version無需保存到本地永久存儲，無需lifeData.vuex_version方式
 vuex_version: '1.0.1',
 },
 mutations: {
 $uStore(state, payload) {
            //payload就是後來調用的this.$u.vuex時傳入的對象
            //如this.$u.vuex("user.info.score","jack") payload = {name:"user.info.score",value:"jack"}
  // 判斷是否多層級調用，state中為對象存在的情況，諸如user.info.score = 1
  let nameArr = payload.name.split('.');//[user,info，score]
  let saveKey = '';
  let len = nameArr.length;
  if(nameArr.length >= 2) {
  let obj = state[nameArr[0]];
  for(let i = 1; i < len - 1; i ++) {
   obj = obj[nameArr[i]];// 此時obj就是user.info,當然此時他還是一個空數據
  }
                //nameArr[len-1]就是score,obj[nameArr[len - 1]]相當於 user.info.score
  obj[nameArr[len - 1]] = payload.value;
  saveKey = nameArr[0];
  } else {
  // 單層級變量，在state就是一個普通變量的情況
  state[payload.name] = payload.value;
  saveKey = payload.name;
  }
  // 保存變量到本地，見頂部函數定義
  saveLifeData(saveKey, state[saveKey])
 }
 }
})
export default store

在同目錄下創建 mixin.js文件

思路：
a. 為瞭能夠在每個頁面都能通過this.的方式使用變量，我們需要將mapState通過Vue mixin的方式進行全局混入
b. 為瞭能夠在每個頁面都能輕松的調用vuex中的mutations裡的方法，我們需要一個方法能夠幫我們去調用uStore，而不是每次都通過commit的方式，因此uView還混入瞭另一個方法$u.vuex

ps: minxi（混入）是Vue提供的一種實現全局功能的一個api,混入有多種方式這裡使用瞭全局混入，如果對於混入不是很瞭解可以去Vue官網查看相關文檔 

//mixin.js
import { mapState } from 'vuex'
import store from "@/store"

// 嘗試將用戶在根目錄中的store/index.js的vuex的state變量，全部加載到全局變量中
let $uStoreKey = [];
try{
 $uStoreKey = store.state ? Object.keys(store.state) : [];
}catch(e){
 
}

module.exports = {
 created() {
 // 將vuex方法掛到this.$u上
 // 使用方法為：如果要修改vuex的state中的user.name變量為"史詩" => this.$u.vuex('user.name', '史詩')
 // 如果要修改vuex的state的version變量為1.0.1 => this.$u.vuex('version', '1.0.1')
 this.$u.vuex = (name, value) => {
  this.$store.commit('$uStore', {
  name,value //這裡有沒有回憶起來$uStore傳入的payload haha 
  })
 }
 },
 computed: {
 // 將vuex的state中的所有變量，解構到全局混入的mixin中
 ...mapState($uStoreKey)
 }
}

開始全局混入,在main.js中引入 mixin.js文件進行混入 

//main.js
let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);

將store放到Vue實例中

//main.js
import store from '@/store';

// 將store放入Vue對象創建中
const app = new Vue({
 store,
 ...App
})

以上就是uView官方對vuex的封裝，在app開發中使用這種封裝後的vuex很便捷，同時自身也可以根據需要在@/stote/index.js中去拓展自己的方法

結語

以上就是uniapp全局變量的不同實現方式，具體使用哪一種需要在實際開發中根據實際選擇，個人感覺uView對vuex的封裝，對於初入前端我而言有著很高參考價值，因此特別整理出來留存分享。

到此這篇關於詳解uniapp的全局變量實現方式的文章就介紹到這瞭,更多相關uniapp 全局變量內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：