vue单页面应用刷新网页后vuex的state数据丢失的解决办法
2024-10-16 04:11:57
第一种方案
首先将数据保存在vuex的store中，同时将这些信息也保存在sessionStorage中。这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。
sessionStorage 使用方法和 localStorage 是一样的
第二种方案
持久化
npm install vuex-persistedstate --save
import createPersistedState from "vuex-persistedstate";
该插件默认持久化所有state，当然也可以指定需要持久化的state：
const store = new Vuex.Store({
modules: {
app,
settings,
tagsView,
user
},
getters,
plugins: [
createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中的
app: val.app
};
}
})
]
});
我自己使用的是 第二种 简单方便
最新文章
- js 实现动态的图片时钟
- asp.net捕获全局未处理异常的几种方法
- Excel 统计在某个区间内数值的个数
- [转] JS运算符 &&和|| 及其优先级
- js---疑点代码段解析
- SVN冲突解决
- opencv 边缘检测原理
- 如何把PDF文件拆分为多个文件
- django_admin用法
- 零碎的java知识点记录（一）
- 模板（Template）系统
- vue的子传父
- VirtualBox中CentOS遇到的问题
- linux下安装swoole扩展
- 印度电商Snapdeal获投$1.34亿 eBay领投
- Git详解之六 Git工具
- Linux实战教学笔记45：NoSQL数据库之redis持久化存储（一）
- tp3.2替换模板中如果需要替换的图片在css样式表中怎么办？
- hadoop fs 部分命令详解
- iPhone6 和 iPhone 6 plus的适配