重置Vuex本地存储状态

思路：

在初始化的时候，也就是store的初始状态，把state中的所有状态都拷贝出以一份（这里一定是深拷贝），然后在需要重置状态的时候，再将其还原回去（这里也一定是深拷贝方式）

一：初始化的时候向window挂载属性，并将全部最初的状态拷贝一份

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { deepClone } from '@/utils'


// 保存整站vuex本地储存初始状态
window.SITE_CONFIG = {}
window.SITE_CONFIG['storeState'] = deepClone(store.state)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

main.js入口文件，会重新初始化vue实例，store为最初定义的状态，所以在这向window上挂载

SITE_CONFIG.storeState属性。storeState就是store中所有的最初状态

二：在mutations中定义resetStore方法，通过window.SITE_CONFIG['storeState'] 重置store中的状态

import Vue from "vue";
import Vuex from "vuex";
import common from './modules/common'
import { deepClone } from '@/utils'

Vue.use(Vuex);

export default new Vuex.Store({
  mutations: {
    // 重置vuex本地储存状态
    resetStore(state) {
      Object.keys(state).forEach(key => {
        state[key] = deepClone(window.SITE_CONFIG['storeState'][key])
      })
    }
  },
  modules: {
    common
  },
});

三：在需要重置Vuex状态的时候通过调用resetStore方法就可以了（store.commit("resetStore") ）

备注：上面使用到的deepClone方法：戳一下下方链接

js深拷贝