背景
在前端项目开发中，我们往往会用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()