Question

当我在vue文件中调用导入的vuex动作时，代码错误并中断了站点。我什至将其分解为最简单的事情（当我单击与该动作相关的按钮时，请从该动作中记录字符串）。

在我的Vue根目录中

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import JsonCSV from 'vue-json-csv'
import { store } from './store/index'

Vue.component('downloadCsv', JsonCSV)
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

在我的.vue文件中：

import {mapGetters,mapActions} from 'vuex'

methods: {
      ...mapActions([
        'sendDraftSelectionPost'
      ]),
  selectPlayerMethod() {
     this.sendDraftSelectionPost('hello')
  }
}

在我已导入Vuex的index.js文件中

import Vue from 'vue'
import Vuex from 'vuex'
import { debug } from 'util';
import draft from './modules/draft'

Vue.use(Vuex)
Vue.config.devtools = true

const store = new Vuex.Store({
    strict: debug,
    modules: {
        draft,
    }
})

export default store

在我的actions.js文件中：

const actions = {

    sendDraftSelectionPost ({ commit }, draftSelection) {
        console.log(draftSelection)
    }

}

export default actions

预期结果应该是我只是在开发人员控制台中看到一个字符串控制台，上面写着“ Hello”

但是，我收到以下消息时会遇到一些讨厌的错误： [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"

我什至没有在代码中键入“ dispatch”一词，所以我很困惑。在这里搜索并找到很多类似的帖子后，我还没有找到任何有力的答案或解决方案。

感谢您的帮助。

Answer 1

每次与@Phil对话时，解决原始问题（而不是注释中所述的子问题）的方法是将我的根Vue中的导入从import { store } from './store/index'修复为import store from './store'。谢谢@Phil !!!

是否有必须从vue组件调用vuex动作的特定方法？

1 个答案: