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

My guess would be either not initialized store, or wrong this context.

For the purposes of debugging I'd try using mapActions helper vuex.vuejs.org:

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions({
      add: 'increment' // map `this.add()` to `this.$store.dispatch('increment')`
    })

    // ...
  }

  // ...
}

Answer 2

do this

let that = this;

and use that to do the dispatching

that.$store.dispatch(action)

Answer 3

I had this issue as well, and it turned out I had imported Vue and Vuex with capitals, instead of with lowercased names. This is the proper way to import, but there is no error that tells you that this is a possible issue, so it is very hard to spot. I know it shouldn't be capital but anyone can mistype and there is no indication that this is the issue.

This is what I had: (SO DON'T COPY THIS CODE, IT WON'T WORK)

import Vue from 'Vue';
import Vuex from 'Vuex';

Correct Way:

import Vue from 'vue';
import Vuex from 'vuex'; //<-- not Sentence case from '[V]uex' but '[v]uex'

Such a dumb error, but I'm sure others have had the same issue, so hopefully this helps.

Answer 4

I had the same problem, I even asked my own Stackoverflow question for it no no avail until I finally found the solution myself which I've posted here

The content of the posted answer is as follows:

I was struggling with this problem for two days until I finally found the solution.

My problem was because I was using $navigateTo without specifying the frame, I was navigating the whole component. I discovered that store was only bound to the first component that is passed to the render function in main.js

Here is how my main.js looked:

new Vue({
  store,
  render: h => h('frame', [h(store.state.is_logged_in ? Main : Login)]),
  created() {
    this.$store.commit('setNav', this.$navigateTo);
    if (this.$store.state.is_logged_in) {
      this.$store.dispatch('init');
    }
  },
}).$start();

I discovered that If is_logged_in was true this.$store, or mapActions etc only worked in Main and it's child components, otherwise it would only work in Login and it's child components. Then I was reading This and saw the following code in the store code of the example:

import Vue from 'nativescript-vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({...});
Vue.prototype.$store = store;
module.exports = store;

So I added the line Vue.prototype.$store = store; to my own store definition and finally my problem was solved. This really gave me such a hard time. Hope I can save somebody.