这篇文章给大家介绍的内容是关于vuex模块化和命名空间的实例代码 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

因为Vuex Store是全局注册的，不利于较大的项目，引入模块分离业务状态和方法，引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题

首先建立一个模块 ./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)中声明并调用

@import '~style/common.styl'

nospace()

margin 0

padding 0

height(h)

height unit(h, 'px')

line-height unit(h, 'px')

.sample-ul

list-style-type none

@nospace

li

display block

height(20)

&:hover

background-color #fcc

import { createNamespacedHelpers, mapState } from 'vuex'

const { mapActions, mapGetters, mapMutations } = createNamespacedHelpers('sample')

const { mapActions: mapOtherActions, mapGetters: mapOtherGetters } = createNamespacedHelpers('other')

export default{

data() {

return {

}

},

computed: {

...mapState({

all : state => state.sample.all

}),

...mapGetters(['all2str']),

...mapOtherGetters(['test'])

},

methods: {

...mapActions(['loadDataAsync']),

...mapMutations(['removeItem']),

...mapOtherMutations(['testing'])

},

created() {

const pid = this.$route.query.pid

this.loadDataAsync(keep, pid)

}

}

推荐使用对象展开运算符将 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

相关推荐：