Vuex中注册模块的方式

在实际的项目应用中，如果把该项目中应用到的所有的state和mutation、Action等放置在全局的store中，会出现全局store内容过于庞大，并且变量名，方法名都很受限制，而vuex中的模块概念就恰好可以解决此问题

下面就如何利用vuex中的模块概念，解决全局Store过于复杂问题，给出两种方式，静态注册和动态注册。首先我们创建的模块的名称为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>

具体使用变量和方法的方式和静态创建是一致的

上面所说的两种方式都是可以应用到自己的项目中的，其中动态注册对该模块的独立性要求更高，可以根据自己的业务需要选择合适的方式