VuexのmapActionsやmapMutationsの使い方

<script>
import { mapActions } from "vuex"
export default {
  methods: {
    ...mapActions("util", ["test"]),
    // utilは、module名（自由に決めて良い）
    // testはActionsに書いた関数名
  },
  created() {
    this.test() //呼び出す時、この記述だけで呼べる
  },
}
</script>

これで使うことができます。

mapMutations の使い方

<script>
import { mapMutations } from "vuex"
export default {
  methods: {
    ...mapMutations("util", ["test"]),
    // utilは、module名（自由に決めて良い）
    // testはMutationsに書いた関数名
  },
  created() {
    this.test() //呼び出す時、この記述だけで呼べる
  },
}
</script>

なぜ mapActions を使うのか

mapActions を使うことで、実際に呼び出す時に、

this.test()

と、非常にシンプルな形で呼び出すことができます。

もし mapActions を使わない場合、

Actions

methods: {
  this.$store.dispatch("util/test")
}

Mutations

methods: {
  this.$store.commit("util/test")
}

こうなります。

以上の内容で本編は終了ですが、Vuex の実装自体が検討つかない場合は、続きをご覧ください。

Laravel に Vuex を導入する方法

Vuetify の Snackbar を Vuex で定義してどこでも使い回す方法

Vue.js で store の処理をファイルを分けて記載する方法

【rootState で解決】vuex で store をファイルで分割したあとデータの受け渡しで詰まった

Vuex の全体の実装

Vuex の全体の実装を確認していきます。

━ store
  ┣ index.js
  ┗ modules
      ┗util.js

index.js

import Vue from "vue"
import Vuex from "vuex"
import util from "./modules/util"

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    util,
  },
})

util.js

const getters = {}
const state = {}
const mutations = {
  test(state) {
    console.log("test")
    //state.test = 'test'と書いてstateを変更できる
  },
}
const actions = {
  test({ commit }) {
    console.log("test")
    // commit('test') これでMutationsのtestという関数を動かせる
  },
}

export default {
  namespaced: true, //これがないとダメ
  state,
  mutations,
  getters,
  actions,
}

Vuex の課題点

mapActions と mapMutations は非常にできることが似ています。

ですので、

呼び出す時は mapActions で呼び出す
state を変更する記述だけ Mutations に書く

と決めておくことで、

「あれは、mapMutations で、あれは mapActions で・・・」と混乱しなくて済むと思います。

これはプロジェクトの方針次第だと思うので、参考程度でお願いします。

まとめ

以上です。

公式ドキュメントのここに、色々なパターン書かれている中で抜粋しています。

誰かの参考になればと思います。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！