uView——全局變量配置

簡介

　　作為一個完整項目，全局變量是必不可少。

　　uView進行配置后，將全局變量永久存儲到本地。在項目加載的時候附加到vue.data上。

 

方法　　

　　this.$u.vuex('vuex_xxx','value')

　　　　參數：

　　　　　　string : 變量名稱

　　　　　　value：值

　　　　返回值：無　　

　　　　返回值意義：無

　　　　作用：保存變量到本地存儲中。

 

　　this.vuex_xxx

　　　　取值

 

配置

　　1. 生成store/index.js ，保存全局變量源代碼

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'];

// 保存變量到本地存儲中
const saveLifeData = function(key, value){
    // 判斷變量名是否在需要存儲的數組中
    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_前綴，是防止變量名沖突，也讓人一目了然
        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) {
            // 判斷是否多層級調用，state中為對象存在的情況，諸如user.info.score = 1
            let nameArr = payload.name.split('.');
            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[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

 

　　2. 繼續保存源代碼: store/$u.mixin.js

// $u.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方法掛在到$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
            })
        }
    },
    computed: {
        // 將vuex的state中的所有變量，解構到全局混入的mixin中
        ...mapState($uStoreKey)
    }
}

 

　　3.在main.js中，引入全局變量.js

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

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

 

　　4. 需要添加的全局變量在store/index.js里 

let saveStateKeys = ['vuex_user', 'vuex_token'];
和
state: {

 // 如果上面從本地獲取的lifeData對象下有對應的屬性，就賦值給state中對應的變量 // 加上vuex_前綴，是防止變量名沖突，也讓人一目了然 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', }
進行配置



　　5. 項目中
　　this.$u.vuex(string , obj ) 保存全局變量

　　  vue.vuex_xxx 取到變量