vuex06Modules以及命名空间，拼多多面试java

在Vuex中，模块（Modules）允许我们将 store 分割成模块（module），每个模块拥有自己的 state、mutations、actions 和 getters，类似于将 store 分成了几个小 store。

命名空间（Namespacing）是模块的一个特性，当启用了命名空间后，每个模块都会被其自己的命名空间所隔离，state 和 getters 需要使用模块路径来访问，mutations 和 actions 则可以直接通过模块内部调用。

下面是一个使用模块和命名空间的 Vuex 示例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const moduleA = {
  state: { count: 1 },
  mutations: {
    increment(state) {
      state.count++
    }
  }
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})
 
// 启用命名空间
store.registerModule('a', moduleA, { namespaced: true })
 
// 访问模块内部的state
console.log(store.state.a.count) // 1
 
// 提交模块内部的mutation
store.commit('a/increment')
 
// 访问更新后的state
console.log(store.state.a.count) // 2

在这个例子中，我们定义了一个名为 moduleA 的模块，它包含一个 state 和一个 mutation。我们将这个模块注册到 Vuex store 中，并且通过 namespaced 选项启用了命名空间。这样，我们在访问 state.a.count 时，需要使用模块的完整路径 a/count。通过 store.commit('a/increment') 提交 mutation 时，也需要指定模块的命名空间。