Vuex持久化存储之vuex-persist

众所周知，vuex所保存的数据在页面刷新后会丢失，故一般情况不想丢失的时候，我们会配合localStorage，手动从localStorage中存取，现发现一款插件可以帮助我们自动存取，打到持久化存储的目的。引入vuex-persist插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体

单眼皮的小熊

7736人浏览 · 2022-04-13 09:48:31

单眼皮的小熊 · 2022-04-13 09:48:31 发布

众所周知，vuex所保存的数据在页面刷新后会丢失，故一般情况不想丢失的时候，我们会配合localStorage，手动从localStorage中存取，现发现一款插件可以帮助我们自动存取，打到持久化存储的目的。

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

安装：

npm install  vuex-persist -S

使用：

import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})

然后存在vuex中数据在页面刷新后就不会丢失了。