第一种方案

首先将数据保存在vuex的store中,同时将这些信息也保存在sessionStorage中。这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化。

sessionStorage  使用方法和 localStorage  是一样的

第二种方案

持久化

npm install vuex-persistedstate --save

 

import createPersistedState from "vuex-persistedstate";
 
该插件默认持久化所有state,当然也可以指定需要持久化的state:
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    tagsView,
    user
  },
  getters,
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
        return {
          // 只储存state中的
          app: val.app
        };
      }
    })
  ]
});
 
 
 
我自己使用的是 第二种  简单方便
posted on 2020-08-13 10:04  假装新手  阅读(556)  评论(0编辑  收藏  举报