未在实例上定义但在呈现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中解释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 compoenent级别（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")
  }
}