【无标题】

Vuex多仓库状态管理

多仓库的意义

在大型的Vue项目中,我们会有很多不同的模块和功能。如果把所有状态都放在一个仓库会导致:

• 单一仓库臃肿难以维护
• 不同模块状态容易混乱
• 模块之间状态难以隔离
  因此我们需要将Vuex的仓库划分为多个模块,每个模块管理自己模块下的状态。

实现多仓库

多仓库的实现步骤:

1. 每个模块创建自己的store文件,并导出store实例

js

 // store/moduleA.js
export default new Vuex.Store({
  state: {
    // ...
  },
  mutations: {
    // ...
  },
  actions: {
    // ...
  },
  getters: {
    // ...
  }
})

2. 在主store中导入模块,并在创建根store时使用modules选项将其合并

js

// store/index.js
import moduleA from './moduleA'
import moduleB from './moduleB'

export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB  
  }
})

3. 在组件中使用 store.state.moduleName 访问状态

js

computed: {
  moduleAState() {
    return this.$store.state.moduleA
  }  
}

优点

多仓库能够做到:

• 每个模块状态隔离
• 状态管理更加清晰
• 方便代码分块维护