vuex按需加載，避免首頁(yè)初始化所有數(shù)據(jù)

大型項(xiàng)目中，不管首頁(yè)需不需要那么多變量，vuex都會(huì)一次性打包進(jìn)去，vuex會(huì)很大，因?yàn)槎际且淮涡约虞d的

需求：按需異步加載vuex

解決方案如下

第一步：把.vue文件對(duì)應(yīng)的vuex拆分出來(lái)

第二步：在xxx.vue文件里面添加 name 和 isNeedVuex?屬性

注意：為了保證引入store下的文件名字跟組件命名一樣，請(qǐng)自行選擇合理的命名方式

第三步：用到 Vue.use 和 Vue.mixin 兩個(gè)api

在main.js中添加如下代碼：

Vue.use(function()?{
????Vue.mixin({
????????beforeCreate:?function()?{
????????????//?$options是組件選項(xiàng)，包含組件.vue文件的?`export?default`?的屬性
????????????//?為了拿到在組件定義的是否按需加載的屬性值?`isNeedVuex`
????????????if(this.$options.isNeedVuex)?{
????????????????//?需要設(shè)置.vue文件的name屬性，跟單文件組件名字命名一樣
????????????????let?name?=?this.$options.name;
????????????????import("./store/modules/"?+?name).then((res)?=>?{
????????????????????console.log(res);
????????????????????//?res.default就是代表我們?cè)趕tore/modules文件夾下對(duì)應(yīng)文件的export?default對(duì)象
????????????????????//?registerModule是vuex自帶的方法，請(qǐng)自行搜索
????????????????????//?第一個(gè)參數(shù)是動(dòng)態(tài)注入的模塊名，第二個(gè)參數(shù)是模塊導(dǎo)出對(duì)象
????????????????????this.$store.registerModule(name,?res.default);
????????????????});
????????????}
????????}
????});
});