Vuex持久化 &vue组件设置背景色
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex持久化 &vue组件设置背景色相关的知识,希望对你有一定的参考价值。
参考技术A在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。为了克服这个问题, vuex-persistedstate出现了~~
将vuex的state存在localStorage或sessionStorage或cookie中一份,刷新页面的一瞬间,vuex数据消失,vuex会去sessionStorage中得到数据,变相的实现了数据刷新不丢失~
(1)解决前奏:order一个对象,当访问它没有的属性时会返回undefined,再访问undefined的address时就会直接报错
(2)找到原因:
数据请求是异步的,在页面进行挂载的时候,数据还没传过来,但是我们已经开始访问data中order这个对象了, 页面挂载完成(vue生命周期mounted) ,页面会因为order暂时没有数据而显示undefined。
当数据传过来后,data中的数据发生改变,触发 更新的钩子(生命周期updated) ,然后就会渲染到页面上,所页面正常显示
(3)解决:使用逻辑运算(逻辑与&&)
vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据
需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功。
过程出现的bug和问题:
1、使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载
2、改用query进行传参后,页面刷新后图片无法加载,这是由于图片的url是在created钩子函数调用查询数据api后才进行赋值,而赋值之后页面已经渲染完成,导致图片无法加载成功
解决方案:
1、通过localStorage将数据持久化,在跳转到当前路由时,先使用localStorage将数据持久化,这里可以配合vuex进行操作
2、页面渲染前,图片的url直接读取localStorage的值,就不会出现页面渲染完成,url还没被赋值导致图片无法加载的情况
附上代码:
需要从 /zyview 跳转至 /viewmessage
/zyview跳转部分:
this.$router.push({ // path: `/viewmessage/${this.names[index]}`, // 使用下列方法方法跳转路由,就不会出现点击tab后再次跳转的bug name: "viewmessage", query: { name: this.lists[index].m_name, // 此为药品名称 index: index, // 药材索引 mid: this.lists[index].id, // 药材id // imgpath: this.lists[index].img_path }, });
触发跳转的方法:
gotodescribe(e,index) { console.log(this.lists[index].id) console.log(this.test) const path = this.lists[index].img_path // 这里path和index是和store中actions方法里面的变量名意义对应,名字不对应无法传值 this.$store.dispatch(‘addimagepath‘, {path,index}) console.log("存储内容" + this.$store.state.imgpath.imgpaths[this.$route.query.index]) this.$router.push({ // path: `/viewmessage/${this.names[index]}`, // 使用下列方法方法跳转路由,就不会出现点击tab后再次跳转的bug name: "viewmessage", query: { name: this.lists[index].m_name, // 此为药品名称 index: index, // 药材索引 mid: this.lists[index].id, // 药材id // imgpath: this.lists[index].img_path }, }); },
这是跳转前将数据持久化的步骤:
this.$store.dispatch(‘addimagepath‘, {path,index})
以下为vuex部分,新建一个文件写此存储图片路径的模块:
const state = { // 图片路径 imgpaths: [], // imgpaths: localStorage.getItem(imgpaths[index]), test: "b4b797913756456bb5ffd8d661ab79e5.jpg" } const getters = { } // 改变state状态 const mutations = { addimgpath(state,{path,index}){ state.imgpaths[index] = path localStorage.setItem(index,path) // 这里使用localStorage持久化数据,后面页面就直接读取localStorage中的数据 } } const actions = { addimagepath(context,{path,index}){ context.commit(‘addimgpath‘,{path,index}) } } export default { state, getters, mutations, actions }
/viewmessage部分:
<el-image :src="`http://image.zysuyuan.cn:8031/${this.path}`" style="width: 400px; height: 400px" :fit="fit" alt="药材" ></el-image>
data() { return { path: localStorage.getItem(this.$route.query.index), ......... } }
created和watch:
created() { this.fetchData(); }, watch: { $route(to, from) { this.path = localStorage.getItem(this.$route.query.index); this.fetchData(); } },
以上是关于Vuex持久化 &vue组件设置背景色的主要内容,如果未能解决你的问题,请参考以下文章
vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据