cannot read property 'dispatch' of undefined in Vuex

Question

I\'m trying to perform a dispatch on \'logOutUser\' in vuex store, and i\'m getting the following error message in respone:

TypeError: Cannot read pro

Answer 1

It is unclear why it is not defined, and why it works when using modules, but not without modules. It could have something to do with the build process / transpiler. If use is actually a static method of the Vue class, then $store would be shared across all instances by installing the plugin via use, but this is not the case. It looks like Vue should be a class exported by the Vue module, but it seems to behave like an instance.

What I've found to work is one of the following (preferred being #3):

1. Call Vue.use wherever Vuex is used

src
├── App.vue
├── main.js <- Vue.use(Vuex)
├── router 
│   └── index.js <- Vue.use(Vuex)
└── store
    ├── myModule.js
    └── index.js <- Vue.use(Vuex)

// store/index.js
import Vue from "vue"; // This module's Vue is not the same instance as that referenced in main.js
import Vuex from "vuex";
import myModule from "./myModule.js";

// Required before creating new store instance
Vue.use(Vuex);

export const store = new Vuex.Store(myModule);

// main.js
import Vue from "vue"; // this module's Vue is different from store/index.js' Vue
import Vuex from "vuex";
import app from "./App";
import router from "./router/index.js";
import { store } from "./store/index.js";

// this part is essential despite already calling Vue.use in store/index.js
Vue.use(Vuex);
// Or, see alternative below

new Vue({
    ...,
    router,
    store,
    components: { app }
});

2. Set $store for all instances of Vue

(As pointed out by yukashima huksay)

src
├── App.vue
├── main.js <- Vue.prototype.$store = store
├── router 
│   └── index.js
└── store
    ├── myModule.js
    └── index.js

Vue.prototype.$store = store;

3. Import global Vue instance into store and main

src
├── App.vue
├── global.js
├── main.js <- Vue.use(Vuex)
├── router
│   └── index.js
└── store
    ├── myModule.js
    └── index.js

// global.js
import vue from "vue";
export const Vue = vue;

// or if you're not using babel, you can use real javascript…,
export { Vue } from "vue";

// store/index.js
import { Vue } from "../global.js";
import vuex from "vuex";
import myModule from "./myModule.js";

Vue.use(vuex);

export const store = new vuex.Store(myModule);

// main.js
import { Vue } from "./global.js";
import store from "./store/index.js";
import router from "./router/index.js";
import app from "./App";

new Vue({
    ...,
    router,
    store,
    components: { app }
});

Answer 2

If we are going to follow app structure suggested by vueX.

Store will be injected automatically

https://vuex.vuejs.org/guide/structure.html

Answer 3

So i've tried all of your solutions, and nothing seems to work out for me. I started to suspect that the problem is related to the fact that deleteUser.vue is not a direct child of App.vue. Anyone I did eventually imported store directly to the component:

import store from '../../store.js'

It solved the problem. I wonder if anyone know a more efficient way to solve this problem. Thank you for your assistance!

Answer 4

I have faced the same issue because missed importing "store". Solved it as :

import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App),
})

Answer 5

That's because you probably didn't add store option to the root instance of Vue. By providing it you will be able to access store from all of root's child components. Therefore your root instance should look like this:

import store from './store'

const app = new Vue({
  /* .. other properties .. */
  store
})

Now you can freely use this.$store within your components.

Answer 6

On a other note

firebase.auth.onAuthStateChanged(user => {
  if(!app){
    /* eslint-disable no-new */
    app = new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })
  }
});

I bet you have this piece of code out of some tutorial because i was in that situation too but it will make your applicaton a lot slower on page reload because it will rerender everything everytime again.

I suggest you to use the onAuthStateChanged Event in your router (yes thats possible) and then check there for possible route blocks or not, will be a lot faster.

Im not home for code examples but i can send some later today if you want.