Basically i want to use my own store inside vue install and vue components i add throught my vue plugin.

I found that i can use vuex inside actual install function and do everything vuex can, but i can't seem to pass it to my custom components.

Is there any other ways to add global events in my SFC's that i add inside my plugin?

import MyComponent from './MyComponent.vue'
import MySecondComponentfrom './MySecondComponent.vue'
import Vuex from 'vuex'
import store from './store.js'

const CustomFn = function(message, options) {
    this.$store.dispatch("someRandomAction", { message, options })
}

export default {
    install(Vue, options) {
        if (this.installed) { return }
        this.installed = true

        Vue.use(Vuex)

        const storeInstance = new Vuex.Store(store)

        Vue['store'] = storeInstance

        // is there a way to add storeInstance to my own components and share one state between them?
        Vue.component('MyComponent', Vue.extend(MyComponent))
        Vue.component('MySecondComponent', Vue.extend(MySecondComponent))

        Vue.prototype['$doStuff'] = CustomFn
        Vue['doStuff'] = CustomFn
    }
}

Problem is that I cannot pass this Vuex store instance inside MyComponent and share the same store between multiple components.

CodePudding user response：

Custom component properties are supposed to be globally provided in Vue 2 by assigning them to Vue.prototype because component instances prototypically inherit from it.

new Vuex.Store(store) is a mistake if store is already Vuex store and not plain object that contains store options. This will result in malfunctioning store like shown in this question. Even if store is not store instance yet, it makes sense to make it an instance and export in a separate module so it could be imported in non-component modules.

It should be:

Vue.prototype.$store = store