Vue.extend创建实例共享store问题

我希望可以在vue实例全局注册类似$toast,$alert的方法,然后在各个组件处可以像this.$toast()这样调用方法。
我现在使用vue.extend的方式,在调用方法时实例化组件,然后挂载在页面上,在不用时可以随时销毁,比如

import Vue from 'vue'
import videoplayer from './video-player.vue';

const videoPlayerConstructor = Vue.extend(videoplayer);

const videoPlayer = (initVideoData = {}) => {
    let instance = new videoPlayerConstructor({propsData:{initVideoData:initVideoData}}).$mount();
    document.body.appendChild(instance.$el);
};

export default videoPlayer;
Vue.$videoPlayer = Vue.prototype.$videoPlayer = videoPlayer;

但是因为这是新实例化的vue,取不到全局挂载的vue对象下的类似store的实例,请问有什么好的办法或者说优雅官方的做法,让这样的组件可以获取到主实例上的store。或者有其他方法可以实现我的这种用法需求。

http://element-cn.eleme.io/#/zh-CN/component/quickstart你可以看下elementUI的按需引入

element单例组件类似alert等也没有把实例上的store注入吧

this.$root.$store

let instance = new videoPlayerConstructor({propsData:{initVideoData:initVideoData}});
//只有Vue.prototype的属性,Vue上的全局属性都需要单独赋值
instance.$store = Vue.$store;
instance.$mount();

1 Like

main.js
window.$globalHub = new Vue({
router,
store,
render: h => h(App),
}).$mount(’#app’);
扩展组件调用:window.$globalHub.$store

Vue.extend({…videoplayer, store});
即可,state能实时响应

import VueShare from ‘./index.vue’;
import store from ‘…/…/store’;
// 创建构造器
const shareInstance = new VueShare();
shareInstance.$store = store;
shareInstance.$mount();

videoPlayerConstructor本身就是Vue的子类 直接像初始化Vue根实例一样
new videoPlayerConstructor({store:this.$store})就可以了