大型项目中,无论首页需不须要那么多变量,vuex都会一次性打包进去,vuex会很大,由于都是一次性加载的vue
需求:按需异步加载vuex
解决方案以下
第一步: 把.vue文件对应的vuex拆分出来,vuex
第二步:在xxx.vue文件里面添加 name
和 isNeedVuex
属性api
注意:为了保证引入store下的文件名字跟组件命名同样,请自行选择合理的命名方式
第三步:用到 Vue.use
和 Vue.mixin
两个api异步
在main.js中添加以下代码:this
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); }); } } }); });