vuex-persistedstate持久保存vuex数据，刷新也不怕

    页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的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
  })]
})

        想使用cookie或localStorage同理

    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模块的数据。文件夹目录如下：

    注意：如果此刻想配置多个选项，将plugins写成一个一维数组，不然会报错。

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

    此外，不使用vuex-persistedstat，明白了原理自己也能简单实现：

1.工具代码

var ctool = {
    setObj: function (key, obj) {
        obj = JSON.stringify(obj);
        localStorage.setItem(key, obj);
    },
    getObj: function (key) {
        var obj = JSON.parse(localStorage.getItem(key));
        return obj;
    },
}

2.在main.js中写刷新绑定事件

window.addEventListener("beforeunload",()=>{
  console.log('refresh');
  ctool.setObj('store',store.state);
})

    代码直接写在new Vue下面即可。

3.在root.vue的create方法中写恢复代码

created() {
      if(ctool.getObj('store')){
        this.$store.replaceState(Object.assign({}, this.$store.state,ctool.getObj('store')));
        ctool.setObj('store',null);
      }
}

    这里为了避免出现异常错误，在恢复缓存后，置空缓存。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！