属性或实例上未定义但在渲染期间引用的方法 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 的无知，我被困在了一些我想念的东西上。我用谷歌搜索了这个问题并得到了很多答案，但其中 none 让我更明智地去做。好像是有范围的东西，我感觉。

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

[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组件的方法中添加导入函数，如下所示。您可以按照 documentation 中的说明寻求 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 组件级别使用方法（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")
  }
}

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

Property or method not defined on the instance but referenced during render I Vuex

javascript

vue.js

vuex

已编辑

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

Property or method not defined on the instance but referenced during render I Vuex

javascript

vue.js

vuex

已编辑

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