这篇文章给大家介绍的内容是关于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)中声明并调用
{{item}}
删除
@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
相关推荐: