Vueチュートリアル第十七編——Vuexのmodule
2897 ワード
module
単一のステータスツリーを使用すると、適用されるすべてのステータスが比較的大きなオブジェクトに集中します.アプリケーションが非常に複雑になると、storeオブジェクトはかなり肥大化する可能性があります.
以上の問題を解決するために、Vuexではstoreをモジュールに分割できます.各モジュールには独自のstate、mutation、action、getterがあります.
store.js
component
小結各モジュールのstate、mutation、action、getterは独立した役割ドメイン である.異なるモジュール間のstate、getterの属性に同級同名がある場合は と誤報する. mutation、actionなどのメソッドが同名であれば全てのモジュールが に触れる.以上の問題を解決するには、各モジュールにもう1つの役割ドメインを分離する必要がある--ネーミングスペース ネーミングスペース
store.js
ネーミングスペース付きバインド関数
単一のステータスツリーを使用すると、適用されるすべてのステータスが比較的大きなオブジェクトに集中します.アプリケーションが非常に複雑になると、storeオブジェクトはかなり肥大化する可能性があります.
以上の問題を解決するために、Vuexではstoreをモジュールに分割できます.各モジュールには独自のstate、mutation、action、getterがあります.
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
state: {
countA: 0
},
getters: {
totalA: (state) => (symbol) => {
return (symbol || '$') + state.countA
}
},
mutations: {
incrementA(state, payload){
state.countA += (payload || 1);
}
}
}
const moduleB = {
state: {
countB: 0
},
getters: {
totalB: (state) => (symbol) => {
return (symbol || '$') + state.count
}
},
mutations: {
incrementB(state, payload){
state.countB += (payload || 1);
}
}
}
const store = new Vuex.Store({
modules: {
moduleA,
moduleB
}
})
export default store
component
{{countA}}
import {mapState, mapMutations, mapActions} from 'vuex';
export default {
methods: {
...mapMutations(['incrementA']),
...mapMutations({add: 'incrementA'})
},
computed: {
...mapState({
countA: state => state.moduleA.countA
})
}
}
小結
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
namespaced: true,
state: {
count: 0
},
getters: {
total: (state) => (symbol) => {
return (symbol || '$') + state.count
}
},
mutations: {
increment(state, payload){
state.count += (payload || 1);
}
}
}
const moduleB = {
namespaced: true,
state: {
count: 0
},
getters: {
total: (state) => (symbol) => {
return (symbol || '$') + state.count
}
},
mutations: {
increment(state, payload){
state.count += (payload || 1);
}
}
}
const store = new Vuex.Store({
modules: {
moduleA,
moduleB
}
})
export default store
ネーミングスペース付きバインド関数
methods: {
...mapMutations(['moduleA/increment']),
...mapMutations({add: 'moduleA/increment'})
},
computed: {
...mapState({
countA: state => state.moduleA.count
})
}