看如下代码:
import Vue from "vue"; import Vuex from "vuex"; import getters from "./getters"; Vue.use(Vuex); const modulesFiles = require.context("./modules", false, /\.js$/); const modules = modulesFiles.keys().reduce((modules, modulePath) => { const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1"); const value = modulesFiles(modulePath); modules[moduleName] = value.default; return modules; }, {}); const store = new Vuex.Store({ modules, getters }); if (localStorage.getItem("store")) { store.replaceState( Object.assign({}, store.state, JSON.parse(localStorage.getItem("store"))) ); } export default store;
我们经常遇到一个问题就是,刷新页面导致状态丢失,一个解决方案就是使用sessionStorage或localStorage随时储存state,刷新页面触发created则判断sessionStorage/localStorage中的state是否有内容,有则覆盖原state。