自定义插件异步拆分Vuex文件

背景

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

我们可以按模块异步拆分Vuex文件，即不同模块导入自己需要用到得Vuex文件。

原理

在需要用到的vuex的vue页面，加入isVuex是否需要异步加载vuex的判断，如果需要就加载对应的Vuex文件

文件目录

步骤

1、需要用到vuex的vue文件内部加入isVuex

name: 'mode1Index',//名字需要和模块内的vuex文件名一致，方便后续使用
isVuex: true

2、编写异步拆分vuex的插件
vueplugin/index.js

var splitVuex = {
    install: function(vue){
        vue.mixin({
            beforeCreate: function(){
                if(this.$options.isVuex){
                    var name = this.$options.name;
                    var that = this;
                    //import会返回一个promise方法
                    import("../store/module/"+name).then((res)=>{
                        //registerModule注册模块，vuex方法
                        //registerModule（['nested', 'myModule'],...）注册嵌套模块 nested/myModule
                        //unregisterModule(moduleName) 来动态卸载模块
                        //注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）
                        that.$store.registerModule(that.$options.name,res.default)
                    })
                }
            }
        })
    }
}
module.exports = splitVuex;

总vuex文件，store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state:{
        num: 1
    }
})

模块vuex文件，module/model1Index.js

export default {
    state:{
        num2: 3
    }
}

3、main.js中导入使用插件

import vuepl from './vueplugin'
vuepl.use(vuepl)

4、页面内使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{$store.state.num}}</h1>
    <h1>{{$store.state.mode1Index.num2}}</h1>
  </div>
</template>

<script>
export default {
  name: 'mode1Index',
  isVuex: true,
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  }
}
</script>

效果展示

5、打包之后你就会看到会多一个处理文件，即对应的模块vuex的处理文件，已经被单独拆分出来