解决uni

2023-11-07 13:01| 来源: 网络整理| 查看: 265

我是前端小白萌新一枚最近在用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) }); } } }

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

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

https://segmentfault.com/a/1190000020880434

【本文地址】

解决uni

解决uni

今日新闻

推荐新闻