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

这个时候就能够解决，刷因页面数据丢失的问题~~~~