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

问题描述

我收到以下错误。

据我所知，代码中，方法就在那里，所以由于我对Vuex的无知，我陷入了一些我想念的事情。我用谷歌搜索了这个问题并得到了不少答案，但没有一个让我更明智地做了什么。它似乎是范围的东西，我感觉到了。

As far I can tell by the code, the method is there, so I'm stuck on something that I miss due to my ignorance of Vuex. I've googled the matter and got quite a few answers but none of them made me any wiser what to do. It seems to be something with scope, I'm sensing.

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

I also get the error below but I suspect that it's the same root cause for both so solving the one will resolve the other.

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

The markup is as follow. I've checked that the path goes to the right location. At the moment I'm not sure at all how to even start to troubleshoot it. Any hints would be appreciated.

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

修改

输入后我改进了导出以包含方法属性，如此。 （但仍然存在相同的错误。）

After input I improved the export to include methods property like so. (Still the same error remaining, though.)

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

我是否必须在商店做一些额外的事情？它看起来像这样。

Do I have to do something extra in the store? It looks like this.

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

推荐答案

你必须在方法中添加导入的函数Vue组件，如下所示。您可以按照。这需要将 this.updateDate 映射到这个。$ store.dispatch（'updateDate'）。

You have to add the imported functions in the methods of Vue component, like following. You can take help of mapActions as explained in the documentation. This is needed to map this.updateDate to 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级别拥有方法（）而不是insue visex，如下：

Edited

In case you dont want to use mapActions, you can use this.$store.dispatch as you are using in your example, however you need to have methods at vue compoenent level (documentation) and not insise vuex, as following:

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

这篇关于未在实例上定义但在呈现I Vuex期间引用的属性或方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！