自定义重置Vuex的某个模块

背景

在前端项目开发中，我们往往会用Vuex来管理共享状态。在庞大的项目中，我们可能会遇到需要reset某一个store或者是全部（比如退出登录）

方案

1.对外抛出一个clearStore方法
2.基于传入的数据，去对应的reset这一个store

具体代码

/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

import menu from './modules/menu';
import common from './modules/common';
import login from './modules/login';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    menu,
    common,
    login
  }
});
export default store

// 重置state数据
export function clearState (state, initData) {
  Object.keys(initData).forEach(key => {
    state[key] = initData[key]
  })
}
// 清除store
export function clearStore (module) {
  if (!store) return
  const modules = ['MENU', 'COMMON', 'LOGIN']
  if (module) {
    store.commit('RESET_' + module)
  } else {
    modules.forEach(item => {
      store.commit('RESET_' + item)
    })
  }
}

/store/modules/common.js (其他模块一样)

import { clearState } from '../index.js'
// 初始化数据
const initState = () => ({
  system: '', //'backstage' 'fontstage'
  pid: '',
  userArea: [],
})
const global = {
  state: initState(),
  mutations: {
    //注意这里定义的名称
    RESET_COMMON (state) {
      clearState(state, initState())
    }
  }
}
export default common

使用

import { clearStore } from '@/store/index.js'
// 登出
async logout () {
  await logout();
  localStorage.clear();
  sessionStorage.clear();
  clearStore()
  router.push('/login');
}

// 重置common的store
clearStore('COMMON')
// 重置所有模块的store
clearStore()