模板网首页 > 建站教程 > vue教程,AngularJS教程 >  vuex-persistedstate持久保存vuex数据,刷新也不怕正文

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);
      }
}
    这里为了避免出现异常错误,在恢复缓存后,置空缓存。
0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢