не может прочитать свойство «рассылка» неопределенного в Vuex

Question

Я пытаюсь выполнить диспетчеризацию 'logOutUser' в хранилище vuex, и я получаю следующее сообщение об ошибке в респоне:

TypeError: Невозможно прочитать свойство 'dispatch' из неопределенного

deleteUser.vue (компонент, из которого не работает действие отправки):

<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:

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

Я должен упомянуть, что я отправляю это действие из другого компонента в моем приложении, и оно прекрасно работаетоттуда.

Спасибо!

Answer 1

Я полагаю, что это не инициализированное хранилище, или неправильный this контекст.

В целях отладки я бы попытался использовать 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

Если мы собираемся следовать структуре приложения, предложенной vueX.

Магазин будет автоматически добавлен

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

Answer 3

Итак, я перепробовал все ваши решения, и, похоже, у меня ничего не вышло.Я начал подозревать, что проблема связана с тем, что deleteUser.vue не является прямым потомком App.vue.Любой, кого я в итоге импортировал, сохранял данные непосредственно в компоненте:

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

Это решило проблему. Интересно, кто-нибудь знает более эффективный способ решения этой проблемы. Спасибо за вашу помощь!

Answer 4

На другой ноте

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

Бьюсь об заклад, у вас есть этот кусок кода из какого-то учебника, потому что я тоже был в этой ситуации, но это сделает ваше приложение намного медленнее при перезагрузке страницы, потому что это будетповторяйте все заново каждый раз.

Я предлагаю вам использовать событие onAuthStateChanged в вашем маршрутизаторе (да, это возможно), а затем проверять наличие возможных блоков маршрута или нет, будет намного быстрее.

Я не дома для примеров кода, но я могу отправить их позже сегодня, если хотите.

Answer 5

Это потому, что вы, вероятно, не добавили опцию store в корневой экземпляр Vue.Предоставив его, вы сможете получить доступ к хранилищу из всех дочерних компонентов root.Поэтому ваш корневой экземпляр должен выглядеть следующим образом:

import store from './store'

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

Теперь вы можете свободно использовать this.$store в своих компонентах.