uniapp vuex中页面刷新导致的state数据丢失问题

vuex中页面刷新导致的state数据丢失问题

在组件/页面中使用

export default{
data(){

},
computed(){
	...mapState({
		someState:(state)=>state.someState
	})
},
methods:{
	someMethods(){
		console.log("someState:",this.someState);
    }
}
}

刷新页面后someState为空

解决办法：

在 store中定义

import app from 'vue'
import createStore from 'vuex' 
const store = createStore({
	state:{
		someState
	},
	actions:{
		changeSomeState(context,payLoad){
			context.commit('CHANGE_SOME_STATE',payLoad);
		}
	},
	mutations:{
		CHANGE_SOME_STATE(state,payLoad){
			state.someState = payLoad;
			uni.setStorageSync("some_state",payLoad);
		}
	}

})
app.use(createStore);

在组件/页面中使用缓存的方式
来获取someState就可以了

export default{
data(){

},
computed(){
	...mapState({
		someState:(state)=>state.someState
	})
},
methods:{
	someMethods(){
		console.log("someState:",this.someState);
		if(!someState){
			console.log(uni.getStorageSync('some_state'));
		}
    }
}
}