Vuex持久化存储之vuex-persist问题
更新时间：2023年10月11日 16:15:45 作者：每逢佳节掉三根.
这篇文章主要介绍了Vuex持久化存储之vuex-persist问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vuex持久化存储之vuex-persist
Vuex 的状态存储并不能持久化。
也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。
引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。
不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。
具体用法
如下：
安装：
npm install --save vuex-persist or yarn add vuex-persist
引入：
import VuexPersistence from 'vuex-persist'
先创建一个对象并进行配置：
const vuexLocal = new VuexPersistence({
storage: window.localStorage
})引入进vuex插件：
const store = new Vuex.Store({
state: { ... },
mutations: { ... },
actions: { ... },
plugins: [vuexLocal.plugin]
}) 通过以上设置，在图3中各个页面之间跳转，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage 。
vuex-persist 的详细属性
| 属性 | 类型 | 描述 |
|---|---|---|
| key | string | 将状态存储在存储中的键。默认: 'vuex' |
| storage | Storage (Web API) | 可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有get和set. 默认是: window.localStorage |
| saveState | function (key, state[, storage]) | 如果不使用存储，这个自定义函数将保存状态保存为持久性。 |
| restoreState | function (key[, storage]) => state | 如果不使用存储，这个自定义函数处理从存储中检索状态 |
| reducer | function (state) => object | 将状态减少到只需要保存的值。默认情况下，保存整个状态。 |
| filter | function (mutation) => boolean | 突变筛选。看mutation.type并返回true，只有那些你想坚持写被触发。所有突变的默认返回值为true。 |
| modules | string[] | 要持久化的模块列表。 |
Vuex持久化插件 Vuex-persist~~简单粗暴
我们知道vuex也有?些弊端,?如浏览器刷新的时候,vuex的数据会丢失,我们一般结合本地存储来解决，这个时候就可以使用 vuex-persist 持久化插件，不需要手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中
第一步
使用命令行 安装一下命令
npm i vuex-persist -S
第二部
引入到vuex
store/index.js
import VuexPersistence from "vuex-persist"
第三步
在store/index.js使用plugins
const vuexLocal = new VuexPersistence({
storage: window.localStorage //这里可以改变存储方式，默认是localStorage
})
export default new Vuex.Store({
state: { ... },
mutations: { ... },
actions: { ... },
plugins: [vuexLocal.plugin]
})这个时候就能够解决，刷因页面数据丢失的问题~~~~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue动态禁用控件绑定disable的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue监听浏览器的后退和刷新事件,阻止默认的事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10![关于console.log打印结果是 [object Object]的解决](//img.jbzj.com/images/xgimg/bcimg2.png)
关于console.log打印结果是 [object Object]的解决
这篇文章主要介绍了关于console.log打印结果是 [object Object]的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue.js的vue-cli脚手架中使用百度地图API的实例
今天小编就为大家分享一篇关于vue.js的vue-cli脚手架中使用百度地图API的实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，你应该使用计算属性。这篇文章我们将一起学习vue.js的计算属性。什么是计算属性，为什么要用这东西呢？通过下面这篇文章你将解决这些问题，下面来一起看看吧。2016-09-09
这篇文章主要为大家详细介绍了vue登录路由验证的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要介绍了详解vue-router 初始化时做了什么,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了使用VUE组件创建SpreadJS自定义单元格的方法，通常我们使用组件的方式是，在实例化Vue对象之前，通过Vue.component方法来注册全局的组件,文中通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2022-01-01
这篇文章主要介绍了关于elementui之封装下载模板和导入文件组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Vue + Element UI 实现权限管理系统之菜单功能实现代码
菜单管理是一个对菜单树结构的增删改查操作，这篇文章主要介绍了Vue + Element UI 实现权限管理系统之菜单功能实现代码,需要的朋友可以参考下2022-02-02
![关于console.log打印结果是 [object Object]的解决](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论