基礎からメモ： Vue.js CH8-p268 ヘルパーでコンポーネントとストアをバインドする

ゲッターやミューテーションを使うロジックを、コンポーネントの算出プロパティやメソッドに全て記述するのは冗長になる。そういう場合にヘルパーが用意されている。

あらかじめ必要なヘルパーを読み込む。

import { mapGetters, mapActions } from 'vuex'

読み込むヘルパーはこの他にmapStateとmapMutationsがある。必要なものだけ読み込む。ステートとゲッターは算出プロパティに、ミューテーションとアクションはメソッドに記述する。

メッセージを表示しインプットフォームの入力でそれを書き換える例を、ヘルパーを使って書き換えてみる。App.vueとmain.jsはそのままで、EditForm.vueにヘルパーを使う。

[src/components/EditForm.vue]

<template>
  <div class="edit-form">
    <input type="text" ref="input" :value="message" @input="doUpdate">
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "EditForm",
  // ヘルパーを使用 => 'this.message' が $store.state.message にマッピングされる
  computed: mapGetters(['message']),
  // ヘルパーを使用 => 'this.doUpdate' が $store.dispach('doUpdate', eventObject) にマッピングされる
  methods: mapActions(['doUpdate'])
}
</script>

<style lang="scss" scoped>
</style>

mapActions(['doUpdate'])の記述で、インプットフォーム内の@input="doUpdate"から$store.dispach('doUpdate')が自動的に呼ばれるが引数の記述が無い。この際に自動的に渡される引数はインプットフォームのイベントオブジェクトなので、ストア側もそれに対応してアクションを書き換える。

[src/store.js]

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: '初期メッセージ',
  },
  getters: {
    message(state) { return state.message }
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    doUpdate({ commit }, ev) {
      let val = ev.target.value    // <= イベントオブジェクトのターゲットの入力値
      commit('setMessage', val)
    }
  }
})

結果は同様に、インプットフォームに入力された文字列に応じてメッセージが同期して変更される。

別のメソッド名でストアのアクションなどを呼び出す

フォームから呼び出すハンドラ名をストアのアクションとは別の名前で登録して呼び出すことができる。

<template>
  <div class="edit-form">
    <input type="text" ref="input" :value="message" @input="update">
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: "EditForm",
  computed: mapGetters(['message']),
  methods: mapActions({update: 'doUpdate'})    //<= ストアのdoUpdateアクションをupdateというハンドラ名で呼び出す
}
</script>

<style lang="scss" scoped>
</style>

mapActionsにオブジェクトで{エイリアス名: ストアのアクション名}として渡す。こうするとストアのdoUpdateアクションをupdateというハンドラ名で呼び出すことになる。