解决Vuex持久化插件-在F5刷新页面后数据不见的问题

页面刷新后,想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后,vuex便可以被应用了。

vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。

vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。

为了克服这个问题, vuex-persistedstate出现了~~

原理:

  • 将vuex的state存在localStorage或sessionStorage或cookie中一份
  • 刷新页面的一瞬间,vuex数据消失,vuex回去sessionStorage中哪会数据,变相的实现了数据刷新不丢失~

使用方法:

安装:

npm install vuex-persistedstate  --save

 

引入及配置

           在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

想要存储到sessionStorage,配置如下:

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})
vuex-persistedstate默认持久化所有state,指定需要持久化的state,配置如下:
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的user
          user: val.user
        }
     }
  })]

此刻的val 对应store/modules文件夹下几个js文件存储的内容,也就是stor/index中import的9个模块,希望哪一部分的数据持久存储,将数据的名字在此配置就可以,目前我只想持久化存储user模块的数据

上一篇:页面缓存刷新


下一篇:emacs 高亮