Using cache in vuex to solve the problem of data loss in refreshing state

In the use of vuex In the process of , We often encounter the problem of refreshing the page state Data loss in , In this case, the local cache can be used to solve

Be careful ：
The instance code is uniapp project , You can convert cache methods to native

// stay index.js in 
state: {
    
	userInfo: null
},
getters:{
    
	userInfo(state) {
    
		if(!state.userInfo){
    
			state.userInfo = uni.getStorageSync('userInfo');
		}
		return state.userInfo
	}
},
mutations: {
    
	setUserInfo(state,data) {
    
		state.userInfo = data;
		uni.setStorageSync('userInfo',data);
	}
},

//  In components state and getters You can get it in 
computed:{
    
	...mapGetters(['userInfo']);
	...mapState(['userInfo']);
},

Be careful
At one's own use vuex A pit in the middle ：
vuex Official documents ： https://vuex.vuejs.org/zh/

1. data The properties of and computed The attribute in cannot have the same name ,
   however state and getters The attributes in can have the same name , They don't interfere with each other .
2. Page to use vuex When there are many data , You can use more …mapState,…mapGetters wait
3. To be updated