わりとよく目にする書き方

index.js stateを定義しています。各membersのプロパティであるhero, wizard, monsterのhandには、何もない状態となっています。

/**
 * index.js
 * vuexのmoduleとして使用します
 */
import mutations from 'mutations'

const state = {
  members : {
    hero : {
      hand : '',
    },
    wizard : {
      hand : '',
    },
    monster : {
      hand : '',
    },
  },
  toolBag : {}
}

export default {
  state,
  actions : {},
  getters : {},
  mutations
}

mutations stateの値を変更するために利用

/**
 * mutations
 * storeの値を変更するために使用します
 */
export default {
  // 装備品をセット
  setEquipHero : (state, sward) =>  {
    state.member.hero.hand = sward;
  },
  setEquipWizard : (state, wand) =>  {
    state.member.wizard.hand = wand;
  },
  setEquipMonster : (state, blendedSpinning) =>  {
    state.member.monster.hand = blendedSpinning;
  },

  // どうぐ袋に入れる・取り出す
  inputToolBag : (state, item) =>  {
    state.toolBag = [ ...state.toolBag, ...items ]
  },
  outputToolBag : (state, item) =>  {
    state.toolBag = [ ...state.toolBag.filter(it => it.name !== item.name) ]
  },


}

だけれども少し長くないというかだるいかも🤔
Reactだとreducerを利用するときに、actionTypesというものを使って、payloadにtypeのプロパティを設定することで、それをswitch文でかますことでstateに設定する値を決定しています。この考え方をVuexに導入してみます。

/**
 * mutations
 * storeの値を変更するために使用します
 */
import equipmentType from './equipment_type'
export default {
  // 装備品をセット
  setEquip : (state, payload) =>  {
    const { type, equipment } = payload;
    if (type){
      switch(type){
         case equipmentType.sward : {
           state.member.hero = { ...state.member.hero, ...equipment }
           break;
         }
         case equipmentType.wizard : {
           state.member.wizard = { ...state.member.wizard, ...equipment }
           break;
         }
         case equipmentType.monster : {
           state.member.monster = { ...state.member.monster, ...equipment }
           break;
         }
      }
    }
  },
  // どうぐ袋に入れる・取り出す
  treatToolBag : (state, payload) =>  {
    const { type, item } = payload;
    if (type){
      switch(type){
         case equipmentType.input : {
           state.toolBag = [ ...state.toolBag, ...items ]
           break;
         }
         case equipmentType.output : {
           state.toolBag = [ ...state.toolBag.filter(it => it.name !== item.name) ]
           break;
         }
      }
    }
  }
}

とはいえそこまで変わったかといえば、微妙...🤔

なぜいいのか

membersが増えたときに、装備品を設定するたび、前述のやり方ではメソッドを生やす形になる。メソッドが増えるということは、対応するパターンが増えるということ。メンバーが100人になったときには、100個メソッド書きたいですか？に対応できる。
実際には equipment_type いろいろactionを書くはめになるが、Vuexを呼び出して実行しようとしたときには、

  const payload = { type : equipmentType.sward, hand : 'GoldenSward' }
  this.$store.commit('equipment/setEquip', payload);

のような書き方をすればOK。
補完もIDEによっては聞くので、 equip... + s... みたいな感じでサクサクすすめられる。

それがメンバー毎に設定するとき、メソッド名が違うとちょとだるくなる。

  this.$store.commit('equipment/setEquipHero',    'GoldenSward');
  this.$store.commit('equipment/setEquipWizard',  'GoldenWand');
  this.$store.commit('equipment/setEquipMonster', 'SuperBlendedSpinning');

設定するメソッド名が多ければ多くなるほど、いろいろと短期記憶領域を圧迫するので、このようにしたほうが覚えることがすくなくていいのかなと思う。
なんだったら、規約ガッチガチにきめて、payloadの中身を分割代入した各プロパティの形式が正しくないようであればErrorにしてしまってもいいのかなと思う。

このようにしてVuexのmutationsを書いたほうがいいのかあと思うのですが、実はこのやり方のほうがベストプラクティスだったりするよっていうのであれば教えてほしいです。

Vuexのmutationsについて考える

わりとよく目にする書き方

なぜいいのか