5

我收到以下错误。

[Vue 警告]：属性或方法“updateData”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。

据我通过代码可以看出，该方法就在那里，所以由于我对 Vuex 的无知，我被困在我想念的东西上。我用谷歌搜索了这件事并得到了很多答案，但没有一个让我更明智地做什么。这似乎是有范围的东西，我感觉到了。

我也收到以下错误，但我怀疑这两者的根本原因相同，因此解决一个将解决另一个。

[Vue 警告]：事件“单击”的无效处理程序：未定义（在...的组件中找到）

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

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

1 回答 1

6

您必须在 Vue 组件的方法中添加导入的函数，如下所示。您可以按照文档mapActions中的说明获取帮助。这需要映射到.this.updateDatethis.$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 组件级别（文档）使用方法，而不是使用 vuex，如下所示：

export default {
  vuex: {
    getters: { activeDataRow: state => state.activeDataRow }, 
    actions: { updateData, resetData }
  }, 
  methods:{ 
    updateData: () => this.$store.dispatch("updateData"), 
    resetData: () => this.$store.dispatch("resetData")
  }
}
于 2016-11-30T01:42:43.407 回答