Vuex持久化存储

最新推荐文章于 2024-10-10 13:52:08 发布

535366

最新推荐文章于 2024-10-10 13:52:08 发布

阅读量304

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/A535366/article/details/129154699

版权

Vuex解决多视图间的数据共享，但状态不持久。vuex-persist插件提供了解决方案，它能将状态自动保存到localStorage，避免页面刷新后数据丢失。只需安装插件，配置存储位置，并在Vuex中引入作为插件，即可实现数据持久化，简化手动存取操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex 解决了多视图之间的数据共享问题，但是运用过程中又带来了一个新的问题Vuex 的状态存储并不能持久化，也就是说当我们存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了

解决：

引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件，不需要手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中

安装：

npm install --save vuex-persist

或者

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]
}) 

设置好以后在中各个页面之间跳转，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage

当然解决的方法千变万化这只是其中一种其余纯看个人理解