0

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

单击第一个列表项会在控制台中显示输出。但是，当单击第二个时，什么都没有发生，所以我很确定该事件根本没有被调度。呈现页面时，我还看到以下错误：

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

我对 Vuex 很陌生，所以我只是在猜测。我是否需要引用 store 中的updateData操作以及state和mutation？我怎么做？错误消息谈到的“数据选项”是什么/在哪里？这不是我的组件状态和属性吗？

4

1 回答 1

3

为什么错误

你得到了错误，因为当你<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 操作，如此处所述。

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

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

以下是为 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>

您可以在视图中使用这些数据属性，基于它计算属性，或者在其上创建观察者等等。

于 2016-11-30T16:37:28.067 回答