uniapp+uView的vuex狀態管理的使用方法；

uView組件已經對vuex進行了封裝，使用起來非常的方便快捷。

 

 store/index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

let user = {};

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

}

// 需要永久存儲，且下次APP啟動需要取出的，在state中的變量名
let saveStateKeys = ['login', 'user', 'token', 'location', 'cart', 'checkout'];

// 保存變量到本地存儲中
const saveuser = function(key, value) {
    switch(key) {
        case 'cart': 
            uni.setTabBarBadge({
                index: 2,
                text: value.master.num.toString() || ''
            })
        default:
    }
    // 判斷變量名是否在需要存儲的數組中
    if (saveStateKeys.indexOf(key) != -1) {
        // 獲取本地存儲的user對象，將變量添加到對象中
        let tmp = uni.getStorageSync('user');
        // 第一次打開APP，不存在user變量，故放一個{}空對象
        tmp = tmp ? tmp : {};
        tmp[key] = value;
        // 執行這一步后，所有需要存儲的變量，都掛載在本地的user對象中
        uni.setStorageSync('user', tmp);
    }
}
const store = new Vuex.Store({
    state: {
        token: user.token ? user.token : '',
        login: user.login ? user.login : false,
        user: user.user ? user.user : {},
        cart: user.cart ? user.cart : {},
        checkout: user.checkout ? user.checkout : {},
        location: user.location ? user.location : { cityId: 110 },
    },
    mutations: {
        $uStore(state, payload) {
            // 判斷是否多層級調用，state中為對象存在的情況，諸如user.info.score = 1
            let nameArr = payload.name.split('.');
            let saveKey = '';
            let len = nameArr.length;
            if (len >= 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;
            }
            // 保存變量到本地，見頂部函數定義
            saveuser(saveKey, state[saveKey])
        }
    }
})

export default store

 store/$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 = {
    beforeCreate() {
        // 將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)
    }
}

然后掛載到main.js

import Vue from 'vue';
import App from './App';

import tui from '@/common/tui';
import util from '@/utils/util';

Vue.config.productionTip = false;

Vue.prototype.tui = tui
Vue.prototype.util = util
Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue()

App.mpType = 'app';

// 引入全局uView
import uView from 'uview-ui'; Vue.use(uView); // 引入store
import store from '@/store'; // 引入uView提供的對vuex的簡寫法文件
let vuexStore = require('@/store/$u.mixin.js'); Vue.mixin(vuexStore); // 引入uView對小程序分享的mixin封裝
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare);

const app = new Vue({
    store,
    ...App
});

// http攔截器，將此部分放在new Vue()和app.$mount()之間，才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js';
Vue.use(httpInterceptor, app);

// http接口API抽離，免於寫url或者一些固定的參數
import httpApi from '@/common/http.api.js';
Vue.use(httpApi, app);

app.$mount();

 

然后：

在每個需要使用vuex管理狀態的頁面引入 vuex

import {mapState} from 'vuex';

computed: {
    ...mapState(['location', 'checkout']), //展開storage里的數據屬性
},

storage數據的存儲

 

 

 

 

 

 

存入storage數據的方法：

//存入對象
this.$u.vuex('checkout', res.data);
this.$u.vuex('cart', res.data);

//存入單個屬性
this.$u.vuex('token', data.token);

this.$u.vuex('login', true);

獲取storage數據的方法：

this.cityId=this.location.cityId;
this.current = this.cart.goods[index];