Vuex持久化存储

关注

最新推荐文章于 2026-06-11 20:02:20 发布 · 379 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

大事件项目08----token保存到vuex中，持久化存储vuex 4.1 代码分析 6、在store的index.js中存入Vuex的内容 6.1 在中, 在成功后, 调用vuex里的mutations方法 ---------------------------------------------------------------------------------------------------------------------------------退出登录，我们要做什么，清除掉我们的token 阅读详情

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

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