這篇文章給大家介紹的內容是關于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}}

  刪除

{{all2str}}

@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

相關推薦：

總結

以上是生活随笔為你收集整理的vuex的命名空间有哪些_vuex模块化和命名空间的实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。