美文网首页
扩展Vue构造方法

扩展Vue构造方法

作者: 努力学习的小丸子 | 来源:发表于2021-06-29 14:52 被阅读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'))

相关文章

  • 扩展Vue构造方法

    背景 需要通过Vue.extend来挂载实例,并且该实例也需要初始化vuex,i18n和vue-router等。为...

  • 日常

    vue.js 基础: Vue构造器:Vue.extend(options) 是vue构造器的扩展,调用Vue.ex...

  • Vue2学习笔记:vue实例

    一、实例化vue 二、添加实例化选项 三、扩展vue构造器 四、属性与方法 五、vue实例选项与原生js的关系 六...

  • Vue.extend的用法

    Vue.extend用于基于Vue构造器创建一个Vue子类,可以对Vue构造器进行扩展。它有一个options参数...

  • Vue.extend扩展实例构造器

    Vue.extend Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器...

  • Vue.extend构造器的延伸(10)

    一、Vue.extendVue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造...

  • Swift- Extension

    扩展属性(只能是计算属性) 扩展构造器 扩展方法 通过扩展方法, 可以修改该实例self本身.但是方法前要加 mu...

  • 框架扩展

    Mixins是对父组件的扩充,Extend扩展组件的构造器 对Vue原型直接进行扩展

  • Vue入门系列(二)Vue实例和组件

    Vue实例是Vue应用的启动器,Vue组件是Vue实例的扩展。 1. Vue实例 通过构造函数可以创建一个Vue的...

  • vue学习笔记

    Vue组件 我们用以下几个步骤来理解组件的创建和注册: Vue.extend()是Vue构造器的扩展,调用Vue....

网友评论

      本文标题:扩展Vue构造方法

      本文链接:https://www.haomeiwen.com/subject/mrbcultx.html