Vueのミックスイン（Mixin）を早く知りたかったという話

前書き

フロントを全く触ってこなかった私は、なぜか現在Vueでフロントを作っています。
コーディングに慣れていない私でも比較的スムーズに導入できたのですが、
最近知ったミックスインという機能をもっと早く知っておけばよかったと思ったので共有します。

Vueについて

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

はじめに — Vue.js
https://jp.vuejs.org/v2/guide/

Vue.jsとは、フロントエンドのフレームワークのことです。
基本的な使い方はVueインスタンスを用意して、そこで定義した値や関数等を利用して、HTMLを書くといった感じです。
もちろん、for文やif文のようなものも存在します。

単一ファイルコンポーネント

上記が基本的な使い方のようですが、私はVue CLI2で生成したwebpackテンプレートやVue CLI3で生成したプロジェクトで作業をしています。
これらによって生成されたVueのプロジェクトは単一ファイルコンポーネントと呼ばれる構成となっています。
下記のように一つのファイルで、template, script, styleを記述して、一つのコンポーネント化することで、
疎結合で再利用可能なモジュール化することができます。

Hello.vue

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

単一ファイルコンポーネントより

Mixin

ミックスインとは、Vueコンポーネント外で定義した、オプションをコンポーネントに組み込むことができる機能です。
例えば、上記のHello.vueにはdataしかなく、computedやmethodsなどが定義されていませんが、
下記のように、mixin.jsを用意してオプションを定義し、それを取り込むことでコンポーネント内で定義した時と同様に、
mixin.js内でcomputedやmethodsなどを利用することができます。

mixin.js

export default {
  data () {
    return {
      greeting: '',
      world: 'World'
    }
  },
  computed: {
    hello: function () {
      return this.greeting + ' ' + this.world + '!'
    }
  }
}

Hello.vue

<template>
  <p>{{hello}}</p>
</template>

<script>
import Mixin from './mixins/mixin'

export default {
  data: function () {
    return {
      greeting: 'Hello'
    }
  },
  mixins: [Mixin]
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

出力（既存プロジェクト内で作ったので、そのスタイルが適応されてしまってます。）

あとがき

このように、ミックスインを使うことで、複数のコンポーネントで共通のオプションを使用することができます。
私はこの機能を最近知ったため、複数のコンポーネントに書いていた同じ処理を削除して、一つのミックスインにまとめる羽目になりました。
皆さんも、色々な機能を把握して、このようなことがないように気をつけましょう。