这篇文章给大家介绍的内容是关于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: '<Home/>',
components: { Home }
})
页面组件（./components/sample.vue）中声明并调用
<template>
<div id="container">
<ul>
<li v-for="(item, index) in all" :key="index">
<span>{{item}}</span>
<button @click="removeItem(index)">删除</button>
</li>
</ul>
<div>{{all2str}}</div>
</div>
</template>
<style rel="stylesheet/stylus" scoped>
@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
</style>
<script type="text/ecmascript-6">
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)
}
}
</script>
推荐使用对象展开运算符将 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
相关推荐：
