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>

单击第一个列表项会在控制台中显示输出。但是，当点击第二个时，没有任何事情发生，所以我很确定该事件根本没有发送。在呈现页面时我也会看到以下错误：

属性或方法＆＃34; updateData＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

我对Vuex很新，所以我只是猜测。我是否需要在商店中引用 updateData 操作，以及状态和突变？我怎么做？什么/在哪里＆＃34;数据选项＆＃34;错误消息谈到的？不是我的组件状态和它的属性吗？

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")正在做的是按照记录here调用您的vuex操作。

＆＃34;数据选项＆＃34;

的内容/位置

如果您只想在该组件中使用该数据属性，则无法定义任何数据属性，可以使用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，或在其上创建watchers以及许多more。

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

1 个答案:

为什么错误

＆＃34;数据选项＆＃34;