Vue.jsのMixinはコーポネントをまたいだ共通変数（設定）に使うと便利

Mixin (ミックスイン)について

公式ドキュメントによると「Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法」とのことですが、雑に言えば、dataやmethodsなど、共通のものを突っ込んでおくところという感じでしょうか。

ミックスイン | vue.js

ミックスインをVueアプリに組み込む

共通設定ファイル

設定ファイル自体は、jsonにしておいたほうが使い勝手がいいので、ドキュメントルートにconfig.jsonを作成します。

{
  "title": "サイト名",
  "baseURL": "https://www.hogehoge.com",
}

ここのファイルを追加すれば、mixin設定が自動的にファイルを読み込んで、コンポーネントから読み込むようにします。

mixinの設定

mixinファイルの場所は特別決まっていませんが、

src/mixins/

あたりがよく使われるようなので、ここにindex.jsを作ります。

const config = require('../../config') // 共通設定ファイル

export default {
  data () {
    return {
      config: config
    }
  }
}

先ほどの共通設定ファイル（config.json）を呼んで、config変数として組み込みむ形です。

Vue.jsで共通設定・関数として使う方法

個別のVueコンポーネントからMixinを呼び出すケース

個別のコンポーネントからMixinを呼び出す場合は、importしてmixinを指定すればOKです。

<script>
import CommonMixin from '@/mixins'

export default {
  mixins: [CommonMixin],
}
</script>

ちなみに、mixinsは配列なので、mixinを複数に分けて、必要なものを複数指定することもできます。

mixin側に複数のexportが設定されている場合も、import側で指定すればOKです。import CommonMixin from ‘@/mixins’

import {hogeMixin} from '@/mixins'

Vue.jsアプリ全体でMixinを読み込む場合

コンポーネント側でなく、Vue.jsアプリ全体でMixinを読み込むことで、コンポーネント側で宣言せずにMixinをコンポーネントを呼び出すことができるようになります。

設定は、main.jsに下記のように記述します。

import Vue from 'vue'
import App from './App.vue'

import {Mixin} from '@/mixins' 

Vue.mixin(Mixin)   

データベース処理や、ユーザーログイン処理、日付や金額の整形処理など、共通で使うものは、methodに入れてmain.jsでロードしておくと、便利です。

注意点は、main.jsで読み込んだMixinのメソッド名はすでに予約されてしまうため、コンポーネントでのメソッド名で重複しないようにする必要があります。

Vue.jsのMixinでコーポネントをまたいだ共通変数（設定）を使う方法をみてきました。

覚えてしまえば簡単なので、ぜひ使ってみてください。