第一种方案
首先将数据保存在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
};
}
})
]
});
我自己使用的是 第二种 简单方便