【Nuxt.js】Nuxt文法編：mixin

mixinとは

再利用可能な部品たちを
まとめて書いて使いまわせるもの✨
変更したい時はmixinだけ変更すればOK🙆‍♀️
管理がとっても便利になります！

実際に例を見ていきましょう👀

簡単な使い方( js )

jsファイルを使いまわしてみます🌟

グローバルで使用することはないので
ローカルでご紹介🎀🧸

ローカルで使用

ただconsoleを出すだけのシンプルなもの

コンフリクトが起きた場合はマージされる

解説

bar:
mixinにない、
コンポーネントの'def'がそのまま反映される

foo:
mixinのみにあり、
コンポーネントと重複せずそのまま反映される

message:
mixinにも
コンポーネントにもあるため
コンポーネントの'goodbye'が優先される

ポイント

mixin.jsとindex.jsで
重なった(コンフリクトした)部分
data.messageが統合(マージ)され
コンポーネントのdataが優先されます🌟

data以外でもオブジェクトで値を使うオプション
methods, coponents, directivesも
同様にマージされます🎀

コード

) file

export default {
  data () {
    return {
      message: 'hello',
      foo: 'abc',
    }
  },
}

export default {

data () {

return {

message: 'hello',

foo: 'abc',

}

) pages

<template>
  <div class="page">
  </div>
</template>

<script>
import Mixin from '../plugins/mixin.js'

export default {
  mixins: [ Mixin ],
  data () {
    return {
      message: 'goodbye',
      bar: 'def',
    }
  },
  created () {
    console.log(this.$data)
  },
}
</script>

</div>

</template>

import Mixin from '../plugins/mixin.js'

export default {

mixins: [ Mixin ],

data () {

return {

message: 'goodbye',

bar: 'def',

}

created () {

console.log(this.$data)

}

</script>

同じ名前のフック関数の呼び出し

関数の場合は全てが呼び出されます。
配列にマージされているので
2つが1つになるのではなく
[0, 1, 2...]と増えていきます🌟

ミックスインのフックは
コンポーネント自身のフック前に呼ばれます。

コード

) file

export default {
  created () {
    console.log('mixin hook called')
  }
}

export default {

created () {

console.log('mixin hook called')

}

) pages

<template>
  <div class="page">
  </div>
</template>

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

export default {
  mixins: [ Mixin ],
  created () {
    console.log('component hook called')
  },
}
</script>

</div>

</template>

import Mixin from '../mixin/mixin.js'

export default {

mixins: [ Mixin ],

created () {

console.log('component hook called')

}

</script>

簡単な使い方( scss )

jsではなくスタイリングを使いまわしてみます🌟
ローカルで使用することはあまりないので
グローバルでご紹介🎀🧸

cssではできず、
scssを使う必要があります！
導入方法は別記事を出します…！

グローバルで使用

今回は視覚的に分かりやすく
円を例にしてます 🔴 👀
複数のスタイルを
共通化できたら便利ですよね？💕

書き換えるのはmixinだけで良い！
って、とっっっても楽ちん🎨✨

参考記事
https://www.webcreatorbox.com/tech/sass-mixin

ポイント

Sassとの相性もよく、
Sass変数とmixinを使って
レスポンシブ対応のmedia queryにも
活かすことができます🌟

別記事で出す予定です🎀

コード

) file

nuxt.config.js でグローバルに💕
styleResourcesは拡張子の種類を
分けて記載しなければいけません✂︎

export default {
  styleResources: {
    scss: [
      '@/assets/scss/_mixin.scss',
    ]
  },
}

export default {

styleResources: {

scss: [

'@/assets/scss/_mixin.scss',

]

}

) assets

@mixin で使い回すスタイルを定義

@mixin circle {
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

@mixin circle {

width: 50px;

height: 50px;

border-radius: 100%;

}

) pages

@includeで
mixinを呼び出すだけ🌟

<template>
  <div class="page">
    <div class="circle" />
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    > .circle {
      @include circle;
      background-color: red;
    }
  }
</style>

</div>

</template>

export default {

}

</script>

.page {

> .circle {

@include circle;

background-color: red;

}

</style>

終わりに

mixin & Sassのメディアクエリ
別記事で出すのでお楽しみに🎶

実際の使い道としては
これが1番だと思います！！

yossy

jsファイルでmixin…
イマイチ使い道が分かりませんでした笑

こう使うと良い！
などご存知の方いらしたら
教えていただけると嬉しいです🙇‍♀️✨