前言: 之前做的都是整个项目的vuex 存储, 一般处理方式就是在主文件写个方法重新拿数据, 例如用户权限,刷新时重新请求后台接口,拿回来数据 赋值给this.$store.state.参数名 ,现在的问题是,最近要做H5页面集成平台, 有大量的state值, 而且不是一个项目的, 分模块的无法请求后台拿回最新状态, 只能做本地存储, 刷新时重新赋值给this.$store.state, 这里就出现了一些赋值问题。
vuex目录结构
问题: 如果刷新时重新赋值使用 this.$store.state.personal = JSON.parse(localStorage.getItem('stateData.personal')) 这样赋值的话就意味着后期模块多了 每次都要去赋值的地方添加新的模块 , 麻烦还容易出错。
解决思路: 存储本地时 更新了vuex 直接将 this.$store.state 整个存储进本地缓存,取值时 this.$store.state = JSON.parse(localStorage.getItem('stateData')) 岂不是很方便, 但是这里这样直接赋值给this.$store.state 是会报错的
错误:[Vue warn]: Error in created hook: "Error: [vuex] use store.replaceState() to explicit replace store state."
解决方案:
存储:
this.$store.state.media.openid = 88833888
localStorage.setItem('stateData', JSON.stringify(this.$store.state))
赋值:
const data = JSON.parse(localStorage.getItem('stateData'))
if (data) {
this.$store.replaceState(Object.assign({}, this.$store.state, data))
}
这里最为关键的是 使用this.$store.replaceState()提供的更新方法