vue3中vuex模块的使用方法

这里有两种使用方法

一、不带命名空间的使用方法

• 默认的模块，state 区分模块，其他 getters mutations actions 都在全局。

const moduleA = { // 创建子模块
  // 子模块state建议写成函数
  state: () => {
    return { username: '模块A' }
  },
  getters: {
    changeName (state) {
      return state.username + 'AAAAA'
    }
  }
}

export default createStore({
  modules: { // 引入使用
    moduleA,
    moduleB
  }
})

// 模板使用用法
    <!-- 1.1使用A模块的state数据 -->
    <p>{
  {$store.state.moduleA.username}}</p>
    <!-- 1.2使用A模块的getters数据 -->
    <p>{
  {$store.getters.changeName}}</p>

二、带命名空间使用方法

• 带命名空间 namespaced: true 的模块，所有功能区分模块，更高封装度和复用。

  const moduleB = {
    // 带命名空间的模块
    namespaced: true,
    state: () => {
      return { username: '模块B'