无法读取 Vuex 中未定义的属性“调度" [英] cannot read property 'dispatch' of undefined in Vuex

问题描述

我正在尝试对 vuex 商店中的logOutUser"执行分派，但在响应中收到以下错误消息:

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

TypeError: 无法读取未定义的属性 'dispatch'

TypeError: Cannot read property 'dispatch' of undefined

deleteUser.vue(dispatch action 不工作的组件):

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
}   

这是我的 main.js 文件:

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.

谢谢！

推荐答案

那是因为你可能没有在 Vue 的根实例中添加 store 选项.通过提供它，您将能够从所有 root 的子组件访问 store.因此，您的根实例应如下所示:

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

现在您可以在您的组件中自由使用 this.$store.

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

这篇关于无法读取 Vuex 中未定义的属性“调度"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！