vue.jsのMixinsを利用することでコンポーネント内で定義していないデータプロパティやメソッドの追加を行うことができます。例えば複数のコンポーネントで同じ処理内容のメソッドを記述している場合にMixinを利用することでコードを共有化し、効率的にコード管理することができます。

言葉で説明するよりも動作確認を行えばすぐにどのようなものか理解できるので簡単なコードを使って説明を行っています。

Mixinからの機能追加

初期環境の設定

mixinsを使ってデータプロパティを追加する前にindex.htmlファイルを作成し下記のコードを追加します。ここではvue.jsはcdnを利用して読み込んでいます。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Mixinsの理解</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{ title }}</h1>
	</div>

	<script>
		const app = new Vue({
			el: '#app',
			data: {
				title : 'Hello Mixins',
			}
		})
	</script>
</body>
</html>

ブラウザにはHello Mixinsが表示されます。

初期画面
初期画面

データプロパティを追加する

Mixinsを使ってVueインスタンスの中で定義していないデータプロパティを追加します。

Mixinsを使ってデータプロパティを追加するためにはオブジェクトを作成します。ここではmyMixinという名前のオブジェクトを作成して、Vueインスタンスにmixinsプロパティで追加を行います。これだけの設定でmyMixinに設定したデータプロパティをVueインスタンスから利用することができます。

Mixinで追加したデータプロパティはmessageです。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Mixinsの理解</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{ title }}</h1>
		<h2>{{ message }}</h2>
	</div>

	<script>
		const myMixin = {
			data(){
				return {
					message : 'hello from mixins',
				}
			},
		}

		const app = new Vue({
			el: '#app',
			mixins: [myMixin],
			data: {
				title : 'Hello Mixins',
			}
		})
	</script>
</body>
</html>

Vueインスタンス内で設定しているデータプロパティtitleと同様にMixinsを使って追加したmessageをブラウザ上に表示させることができます。

Mixinsを使って追加したmessageを表示
Mixinsを使って追加したmessageを表示

追加したデータプロパティをcomputedプロパティで

Mixinsを通して追加したデータプロパティmessageをcomputedプロパティで操作できるのか確認してみます。

computedプロパティupperを追加して、toUpperCaseメソッドによりmessageをすべて大文字にします。


const app = new Vue({
	el: '#app',
	mixins: [myMixin],
	data: {
		title : 'Hello Mixins',
	},
	computed:{
		upper(){
			return this.message.toUpperCase();
		},
	},
})

<div id="app">
	<h1>{{ title }}</h1>
	<h2>{{ upper }}</h2>
</div>

ブラウザで確認するとmessageが大文字になっていることが確認できます。このようにMixinsで追加したデータプロパティはVueインスタンスで設定しているデータプロパティと同じ操作ができることが確認できます。

messageを大文字に
messageを大文字に

メソッド、computedプロパティを追加する

メソッド、computedプロパティもデータプロパティと同様にMixinsで追加することができます。

myMixinオブジェクトの中でメソッドalert、computedプロパティupperを定義します。


const myMixin = {
	data(){
		return {
			message : 'hello from mixins',
		}
	},
	methods:{
		alert(){
			alert(this.message);
		},
	},
	computed:{
		upper(){
			return this.message.toUpperCase();
		},
	}
}

Mixinsを使って追加したメソッドalertとcomputedプロパティをhtml上に記述します。通常のVueインスタンスで定義したメソッドとcomputedプロパティと使用方法は同じです。


<div id="app">
	<h1>{{ title }}</h1>
	<h2>{{ upper }}</h2>
	<button @click="alert">Click Here</button>
</div>

ブラウザで確認してみましょう。新たにclickボタンが追加されていることが確認できます。。

クリックボタン追加
クリックボタン追加

ボタンをクリックするとMixinsで追加しメソッドalertが実行され、アラート画面が表示されます。表示されている内容もMixinsで追加したmessageと同じ中身です。

Mixinsで追加したメソッドが実行
Mixinsで追加したメソッドが実行

インスタンスに同じメソッドが存在

Mixinsからメソッドを追加した際にVueインスタンスで定義したメソッド名と同じものが存在することが考えられます。

Mixinsで追加したメソッドとインスタンスに設定したメソッドがどちらが優先されるか確認しておきましょう。

Vueインスタンスにalertメソッドを追加しますが、表示させる内容はVueインスタンス内で定義したデータプロパティtitleです。


const app = new Vue({
	el: '#app',
	mixins: [myMixin],
	data: {
		title : 'Hello Mixins',
	},
	methods:{
		alert(){
			alert(this.title);
		},
	},
})

ブラウザで確認するとVueインスタンス内のデータプロパティtitleで定義したHello Mixinsが表示されるためVueインスタンスのメソッドがMixinsで追加したメソッドよりも優先的に実行されることがわかります。

同じ名前のメソッドalert実行
同じ名前のメソッドalert実行
データプロパティもcomputedプロパティもVueインスタンスの設定が優先されます。

ライフサイクルフックを追加する

Mixinsを使うとライフサイクルフックも追加することが可能です。ここではライフサイクルフックの一つであるcreatedを追加します。


const myMixin = {
	data(){
		return {
			message : 'hello from mixins',
		}
	},
	methods:{
		alert(){
			alert(this.message);
		},
	},
	computed:{
		upper(){
			return this.message.toUpperCase();
		},
	},
	created(){
		console.log('This is myMixin')
	}
}

ページを開くとブラウザのコンソール画面にThis is myMixinが表示されることが確認できます。ライフサイクルフックもMixinsで追加されることがわかります。

createdをVueインステンス側にも設定してどちらが先に実行されるのか確認しておきましょう。

実際に実行すると先にMixins側のcreatedが実行され、その後にVueインスタンス側のcreatedが実行されることがわかります。

Mixinsファイルのimport

Mixinsを別ファイルで作成し、importを通して読み込むことで使用することができます。index.htmlファイルではimportは使用できないので、vueプロジェクトを利用している場合の読み込み手順の方法を記述しておきます。

src¥mixinsディレクトリを作成し、その中にmyMixin.jsファイルを作成し下記を記述します。


const myMixin = {
	data(){
		return {
			message : 'hello from mixins',
		}
	},
	methods:{
		alert(){
			alert(this.message);
		},
	},
	computed:{
		upper(){
			return this.message.toUpperCase();
		},
	},
	created(){
		console.log('This is myMixin')
	}
}

コンポーネントであるvueファイルからパスを間違えないように以下のようにimportでmyMixinを読み込むとそのvueコンポーネントから追加したMixinsのデータプロパティ、メソッドなどを利用することが可能です。


import { myMixin } from '../mixins/myMixin.js'

export default {
  data(){
  	return {
  		title: 'Hello Mixins',
  	}
  },
  mixins : [myMixin],

}

mixinは1つだけではなくimportを使って複数のファイルから読み込むことで複数のmixinを設定することができます。その場合はmixinsプロパティの配列を[AMixin, BMixin, Cmixin]で記述することで実現できます。

グローバルMixinの設定

コンポーネント毎にMixinsを設定するのではなくグローバルにMixinを設定することができます。グローバルに設定するとすべてのコンポーネントで実行することができます。すべてのコンポーネントで実行できる反面、例えば複数のコンポーネントを利用している環境で以下のようなライフサイクルフックを設定した場合にコンソールタグには複数のメッセージが表示されます。すべてのコンポーネントでライフサイクルフックは実行されるためです。グローバルMixinを利用する場合は注意が必要です。


Vue.mixin({
	created(){
		console.log('global mixin');
	}
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

ここまでの説明で基本的なMixinsの設定方法と動作確認を行いました。Mixinsってよく聞くけど何だろうと思っていた人も本文書を通して理解することができたのではないでしょうか。