How to access Vue(vm) instance in Vuex store?

[ankitsinghaniyaz]

What problem does this feature solve?

I have a $notify method on Vue prototype. I need to use that in my action. Is there a way to do that?

I see that on Vuex we have this.$_vm but not sure if that is the right thing to do

What does the proposed API look like?

this.vue.$notify()

[firminochangani]

@ankitsinghaniyaz You may want to read more about "Event Bus".

https://alligator.io/vuejs/global-event-bus/

[jonaskuske]

You can pass in a vm instance as an argument, so in your component where you dispatch the action, you can call:

this.$store.dispatch('myAction', { vm: this });

Now your action can access vm on the parameter object and call $notify() on it:

myAction(context, { vm }) {
  vm.$notify();
}

[ktsn]

IMO, Vuex should not have reference to Vue instance because it is responsible for data. The approach that @jonaskuske provides looks suitable solution.

[serkandemirel0420]

this._vm

[m00nk]

import App from './App.vue';

const myStore = new Vuex.Store({
    state: {
        ...
    },
    actions: {
        myAction(ctx, data) {
              // here you can use this.$app to access to your vue application
        }
    }
});

const app = new Vue({
    el: '#my-div',
    render: h => h(App),
    store: myStore
});

myStore.$app = app; // <--- !!! this line adds $app to your store object

[louisameline]

@m00nk this is undefined for me inside Vuex actions. Note that I use Quasar and have a dedicated file for actions, not sure how it would work in another configuration.

I went with another solution, passing the app in a call upon creation of the store, something like:

const app

export const storeInit = (context, a) => {
  app = a
}

export const otherAction = (context) => {
  // use the event bus or whatever
  app.$root.$emit(...)
}

[shredmaster]

import App from './App.vue';

const myStore = new Vuex.Store({
    state: {
        ...
    },
    actions: {
        myAction(ctx, data) {
              // here you can use this.$app to access to your vue application
        }
    }
});

const app = new Vue({
    el: '#my-div',
    render: h => h(App),
    store: myStore
});

myStore.$app = app; // <--- !!! this line adds $app to your store object

it didn't work for me, mounting after assign the root instance did the trick.

const app = new Vue({
  router,
  store,
  render: h => h(App)
})
store.$app = app
app.$mount('#app') 

[gaby64]

I found this._vm works