Vuexにモジュールを登録する方法

実際のプロジェクトアプリケーションでは,そのプロジェクトに適用されたすべてのstateやmutation,Actionなどをグローバルstoreに置くと,グローバルstoreの内容が膨大で変数名,メソッド名が制限され,vuexのモジュール概念がこの問題を解決するのに適している.
次に、vuexのモジュール概念をどのように利用して、グローバルStoreが複雑すぎる問題を解決するかについて、静的登録と動的登録の2つの方法を示します.まず作成したモジュールの名前はmoduleAで、次のようになります.moduleA.js

export default {
    namespaced: moduleA,  //       
    state() {
        return {
            showModal: false,
            num: 1
        }
    },
    getters: {
        ...
    },
    mutations: {
        changeShowModal() {
            ....
        }
        ...
    }
}

静的storeモジュールの作成
静的作成とは、vuexをインスタンス化するときに必要なモジュールを定義することです.

...
import moduleA from 'moduleA'
...

export default new vueX.Store({
	...
    modules: {
		moduleA 
    }
})

このモジュールの変数とメソッドをvueファイルでどのように使用しますか?

//   state
cumputed: {
    //      store
	...mapState(['isShowSomething']),
        //     
    ...mapState('moduleA', [
        'showModal',
        'num'
    ]),
    ...
},
methods: {
    ...mapMutations('moduleA', [
        'changeShowModal'
    ])
}

動的storeモジュールの作成
動的に作成すると、必要な場所でモジュールを登録します.ページでは、以下のように手動で登録します.

<script>
    import moduleA from '../store/modules/moduleA'
    created() {
        this.$store.registerModule('moduleA', moduleA);
    }
</script>

変数とメソッドを具体的に使用する方法は、静的作成と一致します.
上記の2つの方法はいずれも自分のプロジェクトに適用可能であり、動的登録はモジュールの独立性に対する要求が高く、自分のビジネスニーズに応じて適切な方法を選択することができる.