博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vuex状态管理 -- store刷新后数据会重置的解决方法
阅读量:6239 次
发布时间:2019-06-22

本文共 809 字,大约阅读时间需要 2 分钟。

初用vuex,通过store存储一些共享数据,但是刷新后数据就清空了,所以需要使用本地存储来保存下来。

1.state从localStorage中获取

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export const store = new Vuex.Store({    // store刷新后数据会重载 所以用localStorage保存在本地    state:localStorage.getItem("state") ? JSON.parse(localStorage.getItem("state")):{          userList:[],  // 数据列表    },    mutations:{        saveUserList(state,data){             // data为index请求传过来的数据 赋给staet里中的userList的            state.userList = data;         }    }})

2.在APP.vue中添加以下代码

mounted() {      window.addEventListener('unload',this.saveState)  },  methods: {    saveState(){      localStorage.setItem("state",JSON.stringify(this.$store.state))    }  },

也就是说监听unload方法,如果重载页面就把state存入

sessionStorage,然后在需要state的时候从sessionStorage中取值。

 

转载于:https://www.cnblogs.com/hs610/p/10636275.html

你可能感兴趣的文章
学习与准备的一些资源
查看>>
MySQL索引背后的数据结构及算法原理
查看>>
Eclipse SVN的更新地址是
查看>>
Intel XDK 跨平台 App 开发初体验
查看>>
Windows 下msvc2010编译 NSIS 2.46
查看>>
第三方授权登录(微博篇)
查看>>
苹果App Store审核指南中文翻译(2014.9.1更新)
查看>>
如何复制一个LIST
查看>>
说说我为什么看好Spring Cloud Alibaba
查看>>
RecyclerView 差异更新(diff)
查看>>
Android之ActionBar学习
查看>>
对于法线贴图的深入研究
查看>>
Linux操作
查看>>
并发编程之Operation Queue和GCD
查看>>
perl命令行批量修改文件内容
查看>>
zk服务器的构成,一个请求是如何处理的
查看>>
Webpack使用nodemon实时打包编译
查看>>
趣图:测试的时候一切ok,真正上线的时候……
查看>>
1:三维场景浏览
查看>>
文件的“打开”和“关闭”操作
查看>>