大型项目中,不论首页需不需要那么多变量,vuex都会一次性打包进去,vuex会很大,因为都是一次性加载的

需要:按需异步加载vuex
解决方案如下

第一步: 把.vue文件对应的vuex拆分进去,

第二步:在xxx.vue文件外面增加 nameisNeedVuex 属性

留神:为了保障引入store下的文件名字跟组件命名一样,请自行抉择正当的命名形式

第三步:用到 Vue.useVue.mixin 两个api

在main.js中增加如下代码:

Vue.use(function() {    Vue.mixin({        beforeCreate: function() {            // $options是组件选项,蕴含组件.vue文件的 `export default` 的属性            // 为了拿到在组件定义的是否按需加载的属性值 `isNeedVuex`            if(this.$options.isNeedVuex) {                // 须要设置.vue文件的name属性,跟单文件组件名字命名一样                let name = this.$options.name;                import("./store/modules/" + name).then((res) => {                    console.log(res);                    // res.default就是代表咱们在store/modules文件夹下对应文件的export default对象                    // registerModule是vuex自带的办法,请自行搜寻                    // 第一个参数是动静注入的模块名,第二个参数是模块导出对象                    this.$store.registerModule(name, res.default);                });            }        }    });});