解决uni-app使用vuex刷新后数据失效 即数据刷新后消失
vue刷新当前页面有挺多种方法,比如window.location.reload()或者this.$router.go(0)但是这两种方法是会出现一瞬间的白屏,体验不好,所以这里给大家推荐第三种比较好用的刷新页面的方法在app.vue的加上v-if属性在data里面加上isRouterAlive,当然这个属性名可以自己定义,默认值为truedata () { return { isR...
·
我是前端小白萌新一枚 最近在用uniapp写一个app 遇到不少坑 特此记录一下啦~~
一开始我存储数据时用vue中的store 在登陆的时候把获取到的个人信息存储在store的仓库里面,
然后在每个页面需要的地方获取数据 例如获取用户id
- 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)
});
}
}
}
因为数据是从本地换从中获取的 所以刷新数据也是不会消失的哦
哈哈哈 原本以为写博客应该蛮简单的 但是写起来才发现 真的不容易呀
这里感谢其他博主的博客 查阅了这位博主的资料 链接放在下面 感兴趣的可以看下
更多推荐
已为社区贡献4条内容
所有评论(0)