扩展Vue构造方法

2021-06-29  本文已影响0人  努力学习的小丸子

背景

需要通过Vue.extend来挂载实例,并且该实例也需要初始化vuexi18nvue-router等。
为了避免代码的重复性,因此扩展了Vue的构造方法。
主要代码如下:

// BaseVue.js
import Vue from "vue";
import VueI18n from "vue-i18n";

import router from "./router";
import { initStore } from "./store";
import { initStorage } from "./utils/storage";
Vue.use(VueI18n);

export default class BaseVue extends Vue {
    constructor() {
        super();
    }
    static async create(component) {
        const VueChild = super.extend(component);

        const storage = await initStorage();
        const store = await initStore(storage);
        const i18n = BaseVue.initI18n(store);
        await initCacheAndShortcuts(storage);
        return new VueChild({
            i18n,
            store,
            router,
            storage
        });
    }
    static initI18n(store) {
        const i18n = new VueI18n({
            locale: store.state.setting.locale,
            silentTranslationWarn: true
        });
        return i18n;
    }
}

// main.js
import App from "./App.vue";
BaseVue.create(App).then(App => App.$mount('#app'))
// other.js
import MarketComp from "@/views/web/market/component";
BaseVue.create(MarketComp ).then(MarketComp => MarketComp .$mount('#market'))
上一篇 下一篇

猜你喜欢

热点阅读