一个简单的实例演示vuex模块化和命名空间

因为Vuex Store是全局注册的，不利于较大的项目，引入模块分离业务状态和方法，引入命名空间解决不同模块内名称冲突的问题。（如有理解的错误或不足之处，欢迎留言纠错。）

首先建立一个模块 ./store/modules/sample.js

import SampleAPI from '@/api/sample-api-proxy.js'import { _AjaxUrl } from '@/store/constants'const state = { all: []}const mutations = { resolve (state, payload) { for (let item of payload) { state.all.push(item) } }}const getters = { allstr (state) { return state.join(',') }}const actions = { async init ({commit,state}, pid) { await SampleAPI.get(_AjaxUrl + '/api/game/all', params: {pid}).then((res) => { state.all = res.all commit('resolve', res.data) }) }}export default { namespaced: true, state, mutations, getters, actions}复制代码

./store/index.js 注入模块

import Vuex from 'vuex'import sample_module from './modules/sample'import other_module from './modules/other'export default new Vuex.Store({ //全局Store对象 mutations, actions, state, //模块 modules: {  sample: sample_module, other: other_module }})复制代码

启动程序（main.js）中注册 store 到根组件

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)new Vue({ el: '#app', data() { return { rootParam: 'test' } }, store, router, template: '
      ', components: { Home }})复制代码

页面组件（./components/sample.vue）中声明并调用

      复制代码

推荐使用对象展开运算符将 mapMutations,mapGetters,mapActions,mapState 混入到页面组件，页面仅用于交互体验，不要参杂过多的业务逻辑和状态

通过 createNamespacedHelpers 映射到命名空间

项目结构：

├── index.html├── main.js├── api│ ├── sample-api-proxy.js│ └── ...├── components│ ├── sample.vue│ └── ...└── store ├── index.js ├── actions.js ├── mutations.js ├── state.js └── modules ├── sample.js └── other.js复制代码