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

落日映苍穹つ 2021-08-13 11:34 2727阅读 0赞

我是前端小白萌新一枚 最近在用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][https_segmentfault.com_a_1190000020880434]

[https_segmentfault.com_a_1190000020880434]: https://segmentfault.com/a/1190000020880434