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とメニュー バーナビゲーションの設計は次のとおりです (最終的にアクションがたくさんあるので、それらをファイル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>

最初のリスト項目をクリックすると、コンソールに出力が表示されます。ただし、2 番目のものをクリックしても何も起こらないので、イベントがまったくディスパッチされていないと確信しています。ページがレンダリングされているときに、次のエラーも表示されます。

プロパティまたはメソッド「updateData」はインスタンスで定義されていませんが、レンダリング中に参照されます。data オプションでリアクティブ データ プロパティを宣言してください。

私は Vuex を初めて使用するので、推測にすぎません。updateDataアクションへの参照を、 stateおよびMutationと一緒にストアに入れる必要がありますか? それ、どうやったら出来るの？エラーメッセージが話している「データオプション」はどこにありますか? それは私のコンポーネントの状態ではなく、プロパティですか?

4

1 に答える 1