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]
})这个时候就能够解决，刷因页面数据丢失的问题~~~~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
应用会对用户的操作进行反馈，就叫响应式，数据变化会实时改变UI，就叫数据响应式，修改Vue实例中的数据时，视图会重新渲染，就是Vue的数据响应式2022-05-05
Netlify 带有内置表单处理功能，可以用来存储表单数据，下载 csv 文件，同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。这篇文章主要介绍了在 Vue 应用中使用 Netlify 表单功能,需要的朋友可以参考下2019-06-06
最近在学习vue,学习中遇到了一些感觉挺重要的知识点,感觉有必要整理下来,这篇文章主要给大家介绍了关于Vue.js中计算属性、监视属性的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了Vue使用Echart图标插件之柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
element vue Array数组和Map对象的添加与删除操作
这篇文章主要介绍了element vue Array数组和Map对象的添加与删除功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
这篇文章主要介绍了解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法,需要的朋友可以参考下2018-01-01
小编最近在做一个vue前端项目，需要实现弹窗的拖拽，四边拉伸及对角线拉伸，以及弹窗边界处理功能，本文通过实例代码给大家分享我的实现过程及遇到问题解决方法，感兴趣的朋友一起看看吧2021-08-08
这篇文章主要为大家详细介绍了vue实现滚动条始终悬浮在页面最下方，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue中实现组件跟随鼠标位置弹出效果,本文通过图文示例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
这篇文章主要介绍了基于VUE实现的九宫格抽奖功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
最新评论