cannot read property 'dispatch' of undefined in Vuex

问题

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 property 'dispatch' of undefined

deleteUser.vue (the component from which the dispatch action is not working):

<template>
    <v-dialog v-model="openDelete" persistent max-width="500px">
        <v-card>
            <v-card-title>
                <h4>Delete User</h4>
            </v-card-title> 
            <v-card-text>
                <h2>Are You Sure?</h2>
                <p>Deleting your user is a permanent action.</p>
                <br>
                <br>
                <v-btn
                 color="primary"
                 @click="deleteUser">
                 Delete User
                </v-btn>
                <v-btn
                 color="primary"
                 @click="openDelete = false">
                 Close
                </v-btn>  
            </v-card-text>  
        </v-card>   
    </v-dialog> 
</template>
<script>
import router from '../../router/index.js'
const firebase = require('../../firebaseConfig.js')
export default {
    data: function(){
        return {
            openDelete: true
        }
    },
    methods: {
        deleteUser: function(){
            let user = firebase.auth.currentUser
            const docId = user.uid
            console.log("Trying to delete user ", docId)
            user.delete().then(function() {
            }).catch(function(error) {
                console.error("Error deleting user: ", error)
            });
            firebase.firestore.collection("users").doc(docId).delete().then(() => {
                        console.log('Trying to Log Out in Vuex')
                        this.$store.dispatch('user/logOutUser')
                        alert("User Deleted Successfully!")
                }).catch(function(error) {
                    console.error("Error removing document: ", error);
                });
            router.push('hello')    
            this.openDelete = false
        }
    }
}
</script>

store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import genre from './modules/genre'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        user,
        genre
    }
})

user.js:

const firebase=require('../firebaseConfig.js')

const state = {
    currentUser: null,
    userProfile: {}
}

const actions = {
        fetchUserProfile({commit, state}, uid){
            firebase.firestore.collection("users").doc(uid).get().then((doc)=>{
                commit('setUserProfile', doc.data())
            }).catch((error)=>{
                console.error(error)
            })
        },
        logOutUser({commit, state}){
            commit('setCurrentUser', null)
            commit('setUserProfile', {})
            console.log('Logged Out In Vuex')
        }
}

const mutations = 
    {
        setCurrentUser(state, val){
            state.currentUser = val
        },
        setUserProfile(state, val){
            state.userProfile = val
        }
    }

export default {
    namespaced: true,
    state,
    actions,
    mutations
}   

EDIT: Here's my main.js file:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store.js'
const firebase = require('./firebaseConfig.js')

Vue.config.productionTip = false

let app

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

I should mention that i'm dispatching this action from another component in my application, and it works perfectly fine from there.

Thank you!

回答1:

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.

回答2:

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!

回答3:

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 }
});

回答4:

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.

回答5:

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')`
    })

    // ...
  }

  // ...
}

回答6:

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

Store will be injected automatically

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

回答7:

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.

来源：https://stackoverflow.com/questions/52482814/cannot-read-property-dispatch-of-undefined-in-vuex