Vuex重置store的方法记录 – Gary的个人技术记录

Vue项目中使用Vuex作为状态管理已经是比较通用的做法了，Vuex本质上类似全局的变量存储，方便在所有Vue组件中共享，而且也可以动态改变状态。

目前使用Vuex可以把登录数据保存到localStorage中，实现短时间内免登陆。

存储localStorage参考：Vue项目集成vuex-persistedstate

但是Vuex似乎没有考虑提供一个重置或者清空state的方法，需要自己来实现。

清理登录数据

注销时需要清理store比较麻烦，store是在内存中，哪怕是删除localStorage，也可能再次把内存中的store数据写入localStorage，造成注销失败。

直接删除localStorage

可以直接删除localStorage，删除后还需要刷新页面，似乎体验不是很好，整个页面会刷新。

window.localStorage.removeItem(STORAGE_KEY)
window.location.reload()

重置store

还是考虑从store下手，重置store的思路如下：

在store初始化的时候把store中的初始state存下来
给actions和mutations增加一个重置（__resetStoreState）方法，并把重置方法名称保存到重置方法列表中
如果有子模块，递归处理子模块，重复第2步骤
提供一个外部访问的重置方法，具体逻辑就是把重置方法列表中的重置方法触发一下。

具体实现

具体代码如下（StoreHelper.js），依赖lodash库：

import cloneDeep from 'lodash/cloneDeep'
import store from '@/store'
import Vuex from 'vuex'
const TO_RESET_STORE_STATE_KEYS = [] // 需要清理的Key
const RESET_STORE_STATE_KEY = '__resetStoreState' // 内部清理方法名
/**
 * store重置初始化，递归处理子模块，并把需要重置的key保存下来
 *
 * @param configData store数据
 * @param excludeNames 不清理的模块名，有些数据可能需要在注销时也不清理
 * @param parentModuleKey 模块名拼接，处理子模块
 */
export function $createStoreWithResetHandler (configData, excludeNames = [], parentModuleKey = '') {
  const resetStoreKey = parentModuleKey ? `${parentModuleKey}/${RESET_STORE_STATE_KEY}` : RESET_STORE_STATE_KEY
  TO_RESET_STORE_STATE_KEYS.push(resetStoreKey) // reset相关key存入数组中
  if (configData.modules) {
    Object.keys(configData.modules).forEach(moduleName => {
      if (excludeNames.indexOf(moduleName) === -1) {
        const module = configData.modules[moduleName]
        const newParentModuleKey = parentModuleKey ? `${parentModuleKey}/${moduleName}` : moduleName
        $createStoreWithResetHandler(module, excludeNames, newParentModuleKey)
      }
    })
  }
  if (configData.state) {
    configData.mutations = configData.mutations || {}
    configData.actions = configData.actions || {}
    if (!configData.mutations[RESET_STORE_STATE_KEY]) {
      const initialState = cloneDeep(configData.state)
      configData.mutations[RESET_STORE_STATE_KEY] = state => Object.assign(state, cloneDeep(initialState))
    }
    if (!configData.actions[RESET_STORE_STATE_KEY]) {
      configData.actions[RESET_STORE_STATE_KEY] = ({ commit }) => commit(RESET_STORE_STATE_KEY)
    }
  }
  return configData
}
/**
 * 重置store方法
 *
 * @returns Promise
 */
export function $resetStoreState () { // 需要重置的key已经存下来，循环key触发重置
  const resetResults = TO_RESET_STORE_STATE_KEYS.map(resetKey => store.dispatch(resetKey))
  return Promise.allSettled(resetResults)
}
/**
 * 包装store，方便使用
 *
 * @param configData
 * @param excludeNames
 * @returns {Store<unknown>}
 */
export function $wrapStore (configData, excludeNames = []) {
  return new Vuex.Store($createStoreWithResetHandler(configData, excludeNames))
}
/**
 * 导出$resetStoreState方法，方便使用
 * Vue.use(StoreHelper)
 */
export default {
  install: (Vue, options = {}) => Object.assign(Vue.prototype, { $resetStoreState })
}

包装store搜集数据

包装store搜集state数据，以及需要触发reset的相关方法

store.js默认代码（去掉import）：

Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    Common: CommonStore,
    Theme: ThemeStore
  },
  plugins: [createPersistedState()]
})

修改代码也比较简单，把new Vuex.Store换成$wrapStore，如果部分模块不要reset，可以过滤掉：

Vue.use(Vuex)
Vue.use(StoreHelper)
export default $wrapStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    Common: CommonStore,
    Theme: ThemeStore
  },
  plugins: [createPersistedState()]
}, ['Common']) // Common模块不要reset

触发store重置

在需要的地方触发一下重置，比如注销，然后跳转到登录页面即可

this.$resetStoreState().then(() => {
    // 跳转到登录页面
})

发送评论编辑评论