這篇文章給大家介紹的內容是關於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以上是vuex模組化與命名空間的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
