javascript - 如何在 Vuex 中设计一个商店来处理嵌套自定义组件中的点击？

Question

我正在尝试设计一个商店来管理我的 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 });

我将有许多列表项，单击这些列表项应该会更改存储中数据的值。根组件App和菜单栏Navigation的设计如下(最后会有一堆 Action 所以我把它们收集在文件< em>actions.js)。

<template>
  <div id="app">
    <navigation></navigation>
  </div>
</template>
<script>
import navigation from "./navigation.vue"
export default { components: { navigation } }
</script>

<template>
  <div id="nav-bar">
    <ul>
      <li onclick="console.log('Clickaroo... ');">Plain JS</li>
      <li @click="updateData">Action Vuex</li>
    </ul>
  </div>
</template>
<script>
  import { updateData } from "../vuex_app/actions";
  export default {
    vuex: {
      getters: { activeDataRow: state => state.activeDataRow }, 
      actions: { updateData }
    }
  }
</script>

单击第一个列表项会在控制台中显示输出。然而，当单击第二个时，没有任何反应，所以我很确定该事件根本没有被调度。渲染页面时我还看到以下错误:

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 很陌生，所以我只是猜测。我是否需要在存储中引用 updateData 操作以及状态 和突变？我怎么做？错误消息谈到的“数据选项”是什么/在哪里？这不是我的组件状态及其属性吗？

Answer 1

为什么会出错

您收到错误，因为当您有<li @click="updateData">时在模板中，它查找方法 updateData在 vue 组件中它找不到，所以它抛出错误。要解决这个问题，您需要在 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>

什么this.$store.dispatch("updateData")正在做的是调用你的 vuex 操作，如记录的 here .

“数据选项”是什么/在哪里

您没有定义任何数据属性，如果您只想在该组件中使用该数据属性，则可以使用 vue 组件的数据属性。如果您有需要跨多个组件访问的数据，可以使用vuex state正如我相信你正在做的那样。

以下是获取data properties的方法对于 vue 组件:

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

您可以在 View 中使用这些数据属性，有computed properies基于它，或创建 watchers关于它和许多more .