如何在 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的设计如下（最后会有一堆动作所以我已经将它们收集在文件 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 操作，以及 state 和 mutations ？我怎么做？ What/where 是错误消息中提到的 "data option"？这不是我的组件状态及其属性吗？

Answer 1

为什么会出错

你得到了错误，因为当你在模板中有 <li @click="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>

this.$store.dispatch("updateData") 正在做的是调用您的 vuex 操作，如记录的那样 here。

What/where 是 "data option"

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

以下是为 vue 组件设置 data properties 的方法：

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

您可以在视图中使用这些数据属性，有computed properies based on it, or create watchers on it and many more。

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

How to design a store in Vuex to handle clicks in nested, custom components?

javascript

vue.js

vuex

为什么会出错

What/where 是 "data option"