Javascript 如何在Vuex中设计存储以处理嵌套自定义组件中的单击？

我正在尝试设计一个存储来管理Vuex应用程序的事件。到目前为止，我有以下几点

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 = {}; },
};

export default new Vuex.Store({ state, mutations });

我将有一些列表项，它们应该在单击时更改存储中数据的值。根组件应用程序和菜单栏导航的设计如下（最后会有一堆操作，所以我在actions.js文件中收集了它们）

从“/navigation.vue”导入导航
导出默认{组件：{导航}

普通JS
Action Vuex

从“./vuex_应用程序/actions”导入{updateData}；
导出默认值{
vuex：{
获取程序：{activeDataRow:state=>state.activeDataRow}，
操作：{updateData}
}
}

单击第一个列表项显示控制台中的输出。但是，当单击第二个时，没有发生任何事情，因此我非常确定事件根本没有被调度。在呈现页面时，我还看到以下错误：

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

我是Vuex的新手，所以我只是在猜测。我是否需要在存储中加入对updateData操作的引用，以及状态和突变？我该怎么做？错误消息谈论的“数据选项”是什么/在哪里？这不是我的组件状态和属性吗？

为什么会出现错误 您会收到错误，因为当模板中有

时，它会在vue组件中查找未找到的方法

updateData

，因此会抛出错误。要解决此问题，您需要在vue组件中添加相应的方法，如下所示：

<script>
  import { updateData } from "../vuex_app/actions";
  export default {
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow }, 
      actions: { updateData }
    }, 
    methods:{ 
      updateData: () => this.$store.dispatch("updateData")    
    }
  }
</script>

您可以在视图中使用这些数据属性，也可以基于这些数据属性创建数据属性，或者基于这些数据属性创建多个数据属性

为什么会出错 您会收到错误，因为当模板中有

时，它会在vue组件中查找未找到的方法

updateData

，因此会抛出错误。要解决此问题，您需要在vue组件中添加相应的方法，如下所示：

<script>
  import { updateData } from "../vuex_app/actions";
  export default {
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow }, 
      actions: { updateData }
    }, 
    methods:{ 
      updateData: () => this.$store.dispatch("updateData")    
    }
  }
</script>

---

您可以在视图中使用这些数据属性，也可以基于这些数据属性创建数据属性，或者基于这些数据属性创建多个数据属性

你能分享你的

updateData（）

动作吗？@El_Matella它是空的。我可以添加console.log（“！”）；如果有什么不同的话，我会告诉你的。你在考虑什么？你能分享你的

updateData（）

行动吗？@El_Matella它是空的。我可以添加console.log（“！”）；如果有什么不同的话，我会告诉你的。你在考虑什么？你的每一个回复都变得越来越清晰。这种混乱完全是因为我对这个地区一无所知。虽然还没有，但是很快，呵呵。一个跟进-我注意到我的这是未定义的。因此，获取$store失败。可能是一些基本的东西吗？（我会在几分钟内就这个特定的主题写一个问题，除非你看到一些非常明显的东西。）如果你觉得自己是一个挑战和额外的代表，那么你的每一个回答都会变得越来越清晰。这种混乱完全是因为我对这个地区一无所知。虽然还没有，但是很快，呵呵。一个跟进-我注意到我的这是未定义的。因此，获取$store失败。可能是一些基本的东西吗？（我会在几分钟内就这个特定的主题写一个问题，除非你看到一些非常明显的东西。）以防你觉得自己是一个挑战和额外的代表。

<script>
  import { updateData } from "../vuex_app/actions";
  export default {
    date: {
      return {
        data1 : 'data 1',
        data2 : {
            nesteddata: 'data 2' 
          }
      }
    }
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow }, 
      actions: { updateData }
    }, 
    methods:{ 
      updateData: () => this.$store.dispatch("updateData")    
    }
  }
</script>