<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 から頂ければ幸いです。

それでは！