【Nuxt 2】ミックスイン
ミックスインとは
ミックスイン（mixin）は、Vue コンポーネントに共通的な機能やデータを持たせるための仕組みです。 NuxJS の機能というよりは、Vue.js のそのものの機能になります。
NuxtJS では、ページに共通的なデータや処理を定義することに役立ちます。 具体的に、特定のページに必要なメタデータをミックスインとして定義する、といった用途があります。
ミックスインの基本
定義
はじめにミックスイン用の JS ファイルを作成します。
フォルダ構成は、自身が分かりやすいもので良いかと思います。
ここではmixinsフォルダ内に作成するものとします。
export default {
data: () => ({
myData1: '',
myData2: '',
}),
methods: {
myMethod() {
console.log('my method')
},
},
}ミックスインは、コンポーネントの共通的な部分を切り出すような形で定義します。
読み込み
ミックスインを利用するには、以下のように読み込んだファイルをmixinsオプションで指定します。
import MyMixin from '~/mixins/my-mixin';
export default {
mixins: [MyMixin],
data: () => ({
data1: '',
data2: '',
}),
}結果として以下のようにマージされます。
export default {
data: () => ({
data1: '',
data2: '',
myData1: '',
myData2: '',
}),
methods: {
myMethod() {
console.log('my method')
},
},
}今回はdataとmethodsを定義しましたが、computedやcreated()などその他のプロパティも定義可能です。
注意点
ミックスインとコンポーネントで同じ名前のプロパティやメソッドを定義した場合、コンポーネント側が優先されます。 基本的には、名前が被らないよう注意して定義したほうが良いかと思います。
import MyMixin from '~/mixins/my-mixin';
export default {
mixins: [MyMixin],
data: () => ({
data1: '',
myData1: 'hoge',
}),
methods: {
myMethod() {
console.log(this.myData1)
},
},
}export default {
data: () => ({
data1: '',
myData1: 'hoge',
myData2: '',
}),
methods: {
myMethod() {
console.log(this.myData1)
},
},
}created()などのライフサイクル（フック関数）では、ミックスイン → コンポネントの順で実行されます。
export default {
created() {
console.log('mixin created')
},
}import MyMixin from '~/mixins/my-mixin';
export default {
mixins: [MyMixin],
created() {
console.log('component created')
},
}⇒ mixin created
⇒ component createdグローバルミックスイン
上記は、コンポーネントごとにミックスインを読み込んで設定しました。 これをプラグインを使用することで、すべてのコンポーネントに一括で設定することができます（グローバルミックスイン）。
import Vue from 'vue'
Vue.mixin({
data: () => ({
myData1: '',
myData2: '',
}),
methods: {
myMethod() {
console.log('my method')
},
},
})作成した上記プラグインを、nuxt.config.jsで読み込むことですべてのコンポーネントに反映されます。
export default {
plugins: ['~/plugins/mixins'],
}しつこいようですが、この設定はすべてのコンポーネントに反映されます。
つまり、components、pages、layoutsなどプロジェクト内のすべての Vue ファイルが影響を受けるということです。
このことを理解していなければ、意図しない動作を引き起こす原因になるかもしれません。
基本的にはグローバルミックスインではなく、上記のようにmixinsオプションで個別に設定することをおススメします。
また、Vuex や middleware などを使用することを検討してみてください。