树状模块结构

实例

之一

• By default, getters,actions and mutations are still registered under the global namespace 
  • this allows multiple modules to react to the same action/mutation type.
  • 所以它们不能取相同的名字
• If you want your modules to be more self-contained or reusable, you can mark it as namespaced with namespaced: true.
• When the module is registered, all of its getters, actions and mutations will be automatically namespaced based on the path the module is registered at. For example:（注释是对应的调用方式）

const store = createStore({
  modules: {
    account: {//store.account
      namespaced: true,
      // module assets
      state: () => ({ ... }), // module state is already nested and not affected by namespace option
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },
      // nested modules
      modules: {
        // inherits the namespace from parent module
        myPage: {//store.account.myPage
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },
        // further nest the namespace
        posts: {//store.account.posts
          namespaced: true,
          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

文件目录

# Vuex example (assuming namespaced modules)
src
└── store
    ├── index.js           # Initializes Vuex, imports modules
    └── modules
        ├── module1.js     # 'module1' namespace
        └── nested
            ├── index.js   # 'nested' namespace, imports module2 & module3
            ├── module2.js # 'nested/module2' namespace
            └── module3.js # 'nested/module3' namespace