未在实例上定义但在呈现I Vuex期间引用的属性或方法

Question

我收到以下错误.

[Vue警告]:属性或方法"updateData"未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.

到目前为止我可以通过代码告诉我,方法就在那里,所以由于我对Vuex的无知,我陷入了一些我想念的事情.我用谷歌搜索了这个问题并得到了不少答案,但没有一个让我更明智地做了什么.这似乎与范围有关,我感觉到了.

我也得到下面的错误,但我怀疑它是两个相同的根本原因所以解决一个将解决另一个.

[Vue警告]:事件"click"的处理程序无效:未定义(在组件中找到...)

标记如下.我已检查路径是否到达正确的位置.目前我根本不确定如何开始对其进行故障排除.任何提示将不胜感激.

<template>
  <div id="nav-bar">
    <ul>
      <li @click="updateData">Update</li>
      <li @click="resetData">Reset</li>
    </ul>
  </div>
</template>

<script>
  import { updateData, resetData } from "../vuex_app/actions";

  export default {
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow },
      actions: { updateData, resetData }
    }
  }
</script>

编辑

输入后我改进了导出以包含方法属性,如此.(但仍然存在相同的错误.)

export default {
  vuex: {
    getters: { activeDataRow: state => state.activeDataRow }, 
    actions: { updateData, resetData }, 
    methods:{ 
      updateData: () => this.$store.dispatch("updateData"), 
      resetData: () => this.$store.dispatch("resetData")
    }
  }
}

我必须在商店做些额外的事情吗？看起来像这样.

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const state = { dataRows: [], activeDataRow: {} };
const mutations = {
    UPDATE_DATA(state, data) { state.dataRows = data; state.activeDataRow = {}; },
    RESET_DATA(state) { state.dataRows = []; state.activeDataRow = {}; }
};

export default new Vuex.Store({ state, mutations });

Answer 1

您必须在Vue组件的方法中添加导入的函数,如下所示.您可以mapActions按照文档中的说明寻求帮助.这需要映射this.updateDate到this.$store.dispatch('updateDate').

<script>
  import { updateData, resetData } from "../vuex_app/actions";
  import { mapActions } from 'vuex'

   export default {
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow },
      actions: { updateData, resetData }
    },
    methods: {
       ...mapActions(['updateData', 'resetData'])
    }
  }
</script>

编辑

如果你不想使用mapActions,你可以this.$store.dispatch在你的例子中使用,但是你需要在vue compoenent 级别(文档)中使用方法而不是insise vuex,如下所示:

export default {
  vuex: {
    getters: { activeDataRow: state => state.activeDataRow }, 
    actions: { updateData, resetData }
  }, 
  methods:{ 
    updateData: () => this.$store.dispatch("updateData"), 
    resetData: () => this.$store.dispatch("resetData")
  }
}