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裏面的數據

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章