Vueチュートリアル第十七編——Vuexのmodule

2897 ワード

module
単一のステータスツリーを使用すると、適用されるすべてのステータスが比較的大きなオブジェクトに集中します.アプリケーションが非常に複雑になると、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
            })
        }
    }

小結
  • 各モジュールのstate、mutation、action、getterは独立した役割ドメイン
  • である.
  • 異なるモジュール間のstate、getterの属性に同級同名がある場合は
  • と誤報する.
  • mutation、actionなどのメソッドが同名であれば全てのモジュールが
  • に触れる.
  • 以上の問題を解決するには、各モジュールにもう1つの役割ドメインを分離する必要がある--ネーミングスペース
  • ネーミングスペース
    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
        })
    }