本篇文章給大家分享的是有關(guān)利用uniapp怎么實現(xiàn)一個全局變量，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)基于10余年網(wǎng)站建設(shè)行業(yè)經(jīng)驗，一直致力于為中小型企業(yè)提供信息化解決方案，創(chuàng)新互聯(lián)做到開放、開源，讓企業(yè)所有核心數(shù)據(jù)掌握到企業(yè)手里，打破行業(yè)亂象，讓企業(yè)被網(wǎng)絡(luò)公司掌控的局面不再發(fā)生；美工設(shè)計部，產(chǎn)品/程序研發(fā)部，營銷策劃部，售后客服部。一切服務(wù)為企業(yè)量身定制，專注為您！

全局變量的實現(xiàn)方式

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

• 本地存儲

• 配置文件

• 掛載到 Vue.prototype

• globalData

• vuex

下面對這5種方式的實現(xiàn)進(jìn)行介紹

本地存儲

永久存儲，以app為例即使該應(yīng)用被關(guān)閉，該數(shù)據(jù)依然會被存儲

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

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

同步存儲

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

異步存儲

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

配置文件

這是一種利用模塊化文件導(dǎo)出實現(xiàn)的方式，先將變量寫在js文件中，然后通過export default的形式導(dǎo)出使用

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

config.js

  //如在config.js中 我們導(dǎo)出了一個基礎(chǔ)域名
  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

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

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

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

頁面中

globalData

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

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

• globalData不是響應(yīng)式的，一個文件中對globalData的修改，不會動態(tài)的在另一個文件中響應(yīng)

• 如果想實現(xiàn)globalData的"響應(yīng)"，你需要在onShow的生命周期中手動獲取值

對第二點進(jìn)行解釋，為什么需要在onShow里去獲取值onLoad不行么？

因為如果A、B頁面都引入了globalData，B在頁面內(nèi)部修改了globalData的值返回A頁面，此時A頁面沒有被銷毀不會調(diào)用onLoad生命鉤子，只會執(zhí)行onShow此時在onLoad里去獲取globalData，那么是不會執(zhí)行的，也就無法做到響應(yīng)式

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)
    }
  }

當(dāng)在App.vue中定義好globalData后我們就可以在頁面中使用了
A.vue

Vuex的實現(xiàn)方式

強烈建議使用vuex的方式，在uniapp使用vuex有兩種方式，一種是基于傳統(tǒng)vue的方式，一種是uView封裝后的方式，下面介紹uView官網(wǎng)對vuexd的封裝

傳統(tǒng)實現(xiàn)方式

傳統(tǒng)vuex的使用方式，這里只做簡單介紹,如果對vuex不了解的同學(xué)，可以去vue官網(wǎng)查看官方文檔

在uni.app的根目錄下創(chuàng)建一個store文件，并在其中創(chuàng)建一個index.js文件 內(nèi)容如下

//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是傳入的參數(shù)，可以使單一值也可以是對象
     modifyToken(state,payload){
       state.vuex_token = payload.token
      }
    }
  })
  export default store

在main.js中引入

import store from '@/store';

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

在頁面中使用

uView的vuex實現(xiàn)方式(重點)

首說為什么uView對vuex進(jìn)行了封裝，原因有以下兩點

• uView覺得需要在vuex中定義state和mutations，在每個需要用到vuex的地方都需要引入mapState進(jìn)行解構(gòu)，然后再次使用（操作繁瑣）

• 因為vuex是將變量保存在內(nèi)存中的，刷新瀏覽器就會導(dǎo)致vuex變量消失，一般還需要配合其他的存儲方式進(jìn)行使用如LocalStorage

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

• 先在根目錄下創(chuàng)建一個index.js文件，寫入以下內(nèi)容，開頭我會先提供大致思路具體含義之后會在注釋中解釋

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

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

b. 為了解決每次使用vuex都需要使用mutations中的函數(shù)去操作對應(yīng)的stroe中的變量,封裝了$uStore這一個方法去操作所有的store中的變量，當(dāng)然只進(jìn)行了簡單的復(fù)制操作，對于更拓展的功能，用戶可以自己在mutations中去封裝函數(shù)進(jìn)行拓展

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

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

//創(chuàng)建一個變量，這個變量用于存儲需要永久存儲的數(shù)據(jù)
let lifeData = {};

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

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

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

在同目錄下創(chuàng)建 mixin.js文件

思路：
a. 為了能夠在每個頁面都能通過this.的方式使用變量，我們需要將mapState通過Vue mixin的方式進(jìn)行全局混入
b. 為了能夠在每個頁面都能輕松的調(diào)用vuex中的mutations里的方法，我們需要一個方法能夠幫我們?nèi)フ{(diào)用uStore，而不是每次都通過commit的方式，因此uView還混入了另一個方法$u.vuex

ps: minxi（混入）是Vue提供的一種實現(xiàn)全局功能的一個api,混入有多種方式這里使用了全局混入，如果對于混入不是很了解可以去Vue官網(wǎng)查看相關(guān)文檔

//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中的所有變量，解構(gòu)到全局混入的mixin中
 ...mapState($uStoreKey)
 }
}

開始全局混入,在main.js中引入 mixin.js文件進(jìn)行混入

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

將store放到Vue實例中

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

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

以上就是利用uniapp怎么實現(xiàn)一個全局變量，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：利用uniapp怎么實現(xiàn)一個全局變量-創(chuàng)新互聯(lián)
文章URL：http://weahome.cn/article/epseh.html