无法读取Vuex中未定义的属性“ dispatch”

时间：2018-09-24 15:37:01

标签： vue.js vuex

我正在尝试在vuex存储中的'logOutUser'上执行调度，并且在respone中收到以下错误消息：

  

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

我应该提到我正在从应用程序中的另一个组件分派此操作，并且从那里开始它的运行情况很好。

谢谢！

10 个答案:

答案 0 :(得分：5)

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

import store from './store'

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

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

答案 1 :(得分：1)

目前尚不清楚为什么未定义它，以及为什么在使用模块而不是没有模块时可以使用。它可能与构建过程/编译器有关。如果use实际上是Vue类的静态方法，则可以通过$store安装插件，从而在所有实例之间共享use，但事实并非如此。看来Vue应该是Vue模块导出的类，但它的行为似乎像一个实例。

我发现可以进行以下操作之一（最好是＃3）：

1。在使用Vuex的任何地方致电Vue.use 

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。为$store

的所有实例设置Vue

（如yukashima huksay所指出的）

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

Vue.prototype.$store = store;

3。将全局Vue实例导入存储区和主实例

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

答案 2 :(得分：1)

执行此操作

让那个= this;

并使用它进行调度

that。$ store.dispatch（action）

答案 3 :(得分：0)

因此，我尝试了所有的解决方案，但似乎没有任何解决方案。我开始怀疑这个问题与deleteUser.vue不是App.vue的直接子级有关。我最终所做的任何人都将商店直接导入到组件中：

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

它解决了问题。 我想知道是否有人知道解决此问题的更有效方法。 谢谢您的协助！

答案 4 :(得分：0)

另一方面

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

我敢打赌，您在某些教程中也有这段代码，因为我也处于这种情况，但是这会使您的应用程序在页面重新加载时变慢很多，因为它将再次重新呈现所有内容。

我建议您在路由器中使用onAuthStateChanged事件（是可能的），然后在此处检查是否存在可能的路由阻塞，这会更快。

我不是代码示例的家，但我可以在今天晚些时候发送一些。

答案 5 :(得分：0)

如果我们要遵循vueX建议的应用程序结构。

商店将自动注入

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

答案 6 :(得分：0)

我的猜测可能是未初始化存储，或者是错误的this上下文。

出于调试目的，我将尝试使用mapActions帮助程序 vuex.vuejs.org：

import { mapActions } from 'vuex'

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

    // ...
  }

  // ...
}

答案 7 :(得分：0)

我遇到了同样的问题，我什至问了我自己的Stackoverflow问题，直到最终我自己找到了发布了here

的解决方案，这还是没有用

发布的答案的内容如下：

我在这个问题上苦苦挣扎了两天，直到最终找到解决方案。

我的问题是因为我在使用$navigateTo时没有指定框架，所以我正在导航整个组件。我发现商店仅绑定到传递给main.js中的render函数的第一个组件

这是我的main.js的外观： 

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

我发现，如果is_logged_in为真this.$store或mapActions等仅在Main中起作用，它是子组件，否则它将仅在Login中起作用，并且是子组件组件。然后我正在阅读This，并在示例的store代码中看到以下代码：

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

因此，我在自己的商店定义中添加了行Vue.prototype.$store = store;，终于解决了我的问题。这确实给了我这么难的时间。希望我可以救人。

答案 8 :(得分：0)

我也遇到了这个问题，结果证明我用大写字母而不是小写的名字导入了Vue和Vuex。这是导入的正确方法，但是没有错误告诉您这是一个可能的问题，因此很难发现。我知道这不应该是大写字母，但是任何人都可以输入错误，并且没有迹象表明这是问题所在。

这就是我所拥有的：（因此，请不要复制此代码，否则将无法工作）

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

正确的方式：

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

这样一个愚蠢的错误，但是我敢肯定其他人也有同样的问题，所以希望这会有所帮助。

答案 9 :(得分：0)

我也遇到了同样的问题，因为错过了导入“商店”的机会。解决为：

import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App),
})
相关问题
最新问题