如何设置.vue文件的name属性

在组件销毁后注销对应的store，在router/index.js中添加如下代码：

router.beforeEach((to, from, next) => {
    if (from.name) {
        // unregisterModule跟前面的registerModule对应，是vuex的api，请自行搜索
        store.unregisterModule(from.name);
    }
    // <!--to do others-->
    next();
});

大型项目中，不管首页需不需要那么多变量，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);
                });
            }
        }
    });
});