Vuexのmutationのメソッドをmutationのメソッドから叩こうとしてしまっていた話

はじめに

私は最近仕事の実装でVue.jsやVuexのコードを編集することが多いです。その中で若干疑問に思い、そして解決したことについて書いていきたいと思います。

Vuex内部でのパラメータ呼び出し

Vuexの中で定義したパラメータやメソッドを同じVuexの中で呼び出す方法が幾つもあります。

mutationからstateを呼び出す

var store = new Vuex.store({
  state: {
    hoge: 'fuga'
  },
  mutation: {
    piyo: function(state, val) {
      state.hoge = val;
    }
  }
});

getterからstate, getterを呼び出す

var store = new Vuex.store({
  state: {
    hoge: 'hoge',
    fuga: 'fuga'
  },
  getters: {
    getHoge: function(state) {
      return state.hoge;
    },
    getHogeAndFuga: function(state, getters) {
      return getters.getHoge() + state.fuga;
    }
  }
});

actionsから諸々を呼び出す

var store = new Vuex.store({
  state: {
    hoge: 'hoge'
  },
  mutation: {
    setHoge: function(state, val) {
      state.hoge = val;
    }
  },
  actions: {
    doubleHoge(context, val) {
      var hoge = context.state.hoge;
      context.commit('setHoge', hoge + hoge);
    }
  }
})

actionの中でcontext.getters.someGetter()としてgetterを呼び出したり、context.dispatch('someAction')としてactionを呼び出すこともできます。

浮かんだ疑問

実装をしていく中、二つのmutationの処理をまとめて実行したいことがありました。しかしVuexでmutationからmutationを呼び出すにはどうすれば良いのでしょうか？

mutationからmutationを呼び出す？

var store = new Vuex.store({
  state: {
    hoge: false,
    fuga: false,
  },
  mutation: {
    setHoge: function(state, val) {
      state.hoge = val;
    },
    setFuga: function(state, val) {
      state.fuga = val;
    },
    setHogeAndFuga: function(state, val) {
      // setHogeとsetFugaを呼び出したい
    }
  }
});

結論

結論としては、mutationからmutationを呼び出すより真っ当な手段が幾つかあるというところに落ち着きました。

例1. 単純な変更処理をまとめたmutationを作る

今回実装で迷った部分に関して言えば、「ある動作を行った時にフラグを立てる」という単純なものだったので、フラグを立てる処理をまとめたmutationを作ることで解決することができました。

var store = new Vuex.store({
  state: {
    hoge: false,
    fuga: false,
  },
  mutation: {
    setHogeAndFuga: function(state, vals) {
      state.hoge = vals.hoge;
      state.fuga = vals.fuga;
    }
  }
});

これでVueコンポーネント内からthis.$store.commit('setHogeAndFuga', vals)とすることで操作できるようになります。

例2. 複数のmutationを行うactionを作る

また、もうすこし複雑な処理を幾つかまとめて実行したいという時でも、actionsにそれら処理をまとめて実行するactionを作成することで要件を満たすことができます。

var store = new Vuex.store({
  state: {
    // ...
  },
  mutation: {
    mutationA: function(state, val) {
      // ...
    },
    mutationB: function(state, val) {
      // ...
    }
  },
  actions: {
    someAction: function(context, param) {
      context.commit('mutationA', param.a);
      context.commit('mutationB', param.b);
    }
  }
}):

このようにするとVueコンポーネント内ではthis.$store.dispatch('someAction', param)とすることで操作を行うことができます。

最後に

Vue.jsもVuexも中々難しいですが、仕事で頻繁に扱うものなので、しっかり技術を習得していきたいと思います。