uniapp中使用vuex 持久化遇到的問題

目錄

• 前言
• 步驟一
• 步驟二
• 總結

前言

做項目的時候遇到一個問題，就是vue腳手架創建的項目，使用以下代碼可以在控制台-application-sessionstorage下看到vuex的字段，但uniapp看不到。於是便尋找原因。

...store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);

class store {
	namespaced = true;
	state = {
		isLogin: false
	};
	modules = {};
	getters = {};
	mutations = {
		// 改變登錄狀態
		changeLoginStatus(state, payload){
			state.isLogin = payload;
		}
	};
	actions = {
		
	};
}
export default new Vuex.Store({
	modules: {
		main: new store()
	},
	plugins: [createPersistedState({
		storage: window.sessionStorage
	})]
})

...login.js
import {
    mapState,
    mapMutations
} from 'vuex';
export default {
    data() {
        return {};
    },
    computed: {
        ...mapState(['main'])
    },
    methods: {
        ...mapMutations(['main/changeLoginStatus']),
        onLogin() {
            this.$api.login().then(res => {
                this.main.isLogin = true;
                //this['main/changeLoginStatus'](true);
                uni.switchTab({
                    url: '../index/index'
                })
            })
        }
    }
}

步驟一

在首頁中用mapState映射main中的字段，修改登錄狀態this.main.isLogin = true;，發現在瀏覽器控制台中還是沒有看到sessionstorage有vuex字段。於是查看uniapp官方示例代碼https://ext.dcloud.net.cn/plugin?id=280，發現要在mutations修改state里面的數據才起作用。於是進行了步驟二操作。

步驟二

修改onLogin方法，去掉this.main.isLogin = true;，編寫this['main/changeLoginStatus'](true);，成功的在控制台看到vuex字段。

總結

持久化操作要在mutations修改state里面的數據