javascript - 未在实例上定义但在渲染期间引用的属性或方法 I Vuex

Question

我收到以下错误。

[Vue warn]: Property or method "updateData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

据我所知，代码已经有了方法，所以由于我对 Vuex 的无知，我被困在了一些我错过的东西上。我用谷歌搜索了这个问题并得到了很多答案，但没有一个让我更明智地去做。我感觉这似乎是有范围的。

我也遇到了下面的错误，但我怀疑这两者的根本原因相同，所以解决一个就会解决另一个。

[Vue warn]: Invalid handler for event "click": got undefined (found in component at ...)

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

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

编辑

输入后，我改进了导出以包含 methods 属性，就像这样。 (虽然仍然存在相同的错误。)

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 的帮助，如 documentation 中所述.这需要将 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 组件级别 ( documentation ) 而不是 insise vuex，如下所示:

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