优雅地重置 Vuex 子模块的 State

参考: Reset Vuex Module State Like a Proopen in new window

Vue SPA 项目里,我们可能会使用 Vuex 管理应用里的数据,且会依据路由来拆分 Store 的子模块(child module),每个路由对应一个子模块。

而在路由切换时,旧的路由对应的子模块可能就不再需要,这时候就要清理子模块的state,以便释放内存,或下次再次进入该旧路由时可以获取到初始的state数据。

那么如何优雅地重置子模块的state呢?

假设我们的 Store 目录如下:

store
├── index.js
└── modules
    └── cart.js
1
2
3
4

我们可以这样重置:

const getDefaultState = () => {
  return {
    items: [],
    status: 'empty'
  }
}

// initial state
const state = getDefaultState()

const actions = {
  resetCartState ({ commit }) {
    commit('resetState')
  },
  addItem ({ state, commit }, item) { /* ... */ }
}

const mutations = {
  resetState (state) {
    Object.assign(state, getDefaultState())
  }
}

export default {
  state,
  getters: {},
  actions,
  mutations
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29