複数のvueファイルで使い回す関数をvuexに統合する

A.vueとB.vueで全く同じ関数を使う　なんてことはよくある。

例えば電話番号をコピーする関数とかね。

同じコードを別々のファイルにかいていると、メンテナンス性が悪いのでvuexにまとめて書いて呼び出しちゃおうよ！って話。

vuex側の設定

// プロジェクトディレクトリ/resources/js/store/index.js(vuexのファイル)
import Vuex from 'vuex';

const store = new Vuex.Store({
  // ...other state, mutations, actions, getters
  actions: {
    // ...other actions
    copyToClipboardAction(context, text) {
      prompt("Ctrl + C でコピーしてください。", text);
    },
  },
});

export default store;

前提条件として、copyToClipboardActionという関数にtextという引数がフロント（vueファイル）から送られてくることを想定している。

第一引数のcontextは気にしなくていい。

vuexを使えるようにするためにはインストール等が必要なので、まだの人は下記の記事の「インストール」を参照したらいいかも。
vuexの基本的な使い方 導入方法と変数の取得・更新

vueファイル側の設定

<!-- SomeComponent.vue -->
<template>
  <!-- あなたのコンポーネントのテンプレート -->
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['copyToClipboardAction']), // Vuexの'copyToClipboardAction'をメソッドとしてマッピングします
    copyToClipboard(text) {
      this.copyToClipboardAction(text); // 'copyToClipboardAction'メソッド（Vuexのアクション）を呼び出します
    },
  },
};
</script>

<style>
/* あなたのコンポーネントのスタイル */
</style>

copyToClipboardがこのvueファイル上で使う関数。

textが引数。

今回で言うと、電話番号をさっきvuexに定義したcopyToClipboardActionっていうメソッドに渡してあげる感じになる。

注意点

• vuexとvueファイル間で関数名が被ってはいけない
• 同じ関数を呼び出す側にあたる異なるvueファイル同士の関数名は当たり前だが被ってもいい