大型项目中,不论首页需不需要那么多变量,vuex 都会一次性打包进去,vuex 会很大,因为都是一次性加载的
需要:按需异步加载 vuex
解决方案如下
第一步:把.vue 文件对应的 vuex 拆分进去,
第二步:在 xxx.vue 文件外面增加 name
和 isNeedVuex
属性
留神:为了保障引入 store 下的文件名字跟组件命名一样,请自行抉择正当的命名形式
第三步:用到 Vue.use
和 Vue.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);
});
}
}
});
});