解决uni-app使用vuex刷新后数据失效 即数据刷新后消失

我是前端小白萌新一枚 最近在用uniapp写一个app 遇到不少坑 特此记录一下啦~~
一开始我存储数据时用vue中的store 在登陆的时候把获取到的个人信息存储在store的仓库里面，
然后在每个页面需要的地方获取数据 例如获取用户id

1. login.vue

import { mapMutations } from 'vuex';
export default {
   methods:{
   		this.login(this.provider);
   		//this.provider就是接口获取的要存储的数据对象
	}
}

2.store /index.js

state: {
		uerInfo: {},
		hasLogin: false
	},
mutations: {
		login(state, provider) {
			state.hasLogin = true
			state.uerInfo.token = provider.token
			state.uerInfo.id = provider.id
			state.uerInfo.userName = provider.user_name
			state.uerInfo.nickName=provider.nickName
			state.uerInfo.avatarUrl=provider.avatarUrl
			uni.setStorage({
				key: 'uerInfo',
				data: provider
			})
			console.log(state.userinfo)
		}
	}

然后天真的我以为在需要的页面使用辅助函数Mapstate获取用户id就行啦
3.随便一个页面

import { mapState, mapMutations } from 'vuex';
export default {
   computed: mapState(['uerInfo']),
   methods:{
   		initData(){
   		//从仓库里面获取的用户id
   		    let userid = this.uerInfo.id;
			console.log(userid)
			//通过上面的mapState(['uerInfo'])方法把仓库里面的uerInfo映射到当前页面来
			//就相当于在本页面也写了一个uerInfo 然后把仓库里的数据放到这个数据里面 
			//就可以使用仓库里面的值啦
		}
	}
}

然后再 通过接口传递这个id就行了 但是后来我发现只要一刷新页面 所有的数据就会消失
真的超级纳闷 后来就去查了资料 发现原因是因为：

vue的数据是响应式的，但是一刷新数据就会失效 需要使用缓存的方式来缓存数据 但是缓存的数据不会响应式更新 但是可以把两者结合起来就可以啦

因为第二步的代码里面已经写了如何缓存数据 这里就不重复写了 展示一下缓存方法

uni.setStorage({
	key: 'uerInfo',
		data: provider
	})

使用的时候 在需要的页面从缓存里面获取id
4.随便一个页面

export default {
	methods:{
		getUserSet(){
		let userid = uni.getStorageSync('uerInfo').id;
		//封装的request请求
			this.$HTTP({
				url:'XXXXXXXX',//请求的接口
				method:"POST",
				data:{
					userID:userid,
					MyPhoto:arr.data.filename
				}
			}).then((res)=> {
				console.log(res)
				uni.showToast({
					icon:'none',
					title:res.data.msg,
					duration: 2000
				});
			},(err)=>{
				console.log(err)
			});
		}
	}
}

因为数据是从本地换从中获取的 所以刷新数据也是不会消失的哦
哈哈哈 原本以为写博客应该蛮简单的 但是写起来才发现 真的不容易呀

这里感谢其他博主的博客 查阅了这位博主的资料 链接放在下面 感兴趣的可以看下

https://segmentfault.com/a/1190000020880434