# Mixins
###### tags: `Vue` `mixin`

Mixins是一個把元件中重複的功能組合起來，重複使用的方法，可以減少元件中reqpeat code。

通常會放在src下的Minxins file，建立js檔，e.g. exampleMixin.js

export const exampleMixin = {
  created() {
    console.log('Hello from the mixin!')
  }
}

### Order of operations
元件和mixin有相同功能時，mixin的會先被觸發。

**exampleMixin.js**

export const exampleMixin = {
  created() {
    console.log('Hello from the mixin!')
  }
}

**Example.vue**

<script>
    import { exampleMixin } from '../mixins/exampleMixin.js'
    export default {
      mixins: [exampleMixin],
      created() {
        console.log('Hey from the component.')
      }
    }
</script>

result:
---

### Mixing in Data
當元件中的data和mixins的data命名相同，發生衝突時，Vue會優先選擇元件的data

**exampleMixin.js**

    export const exampleMixin = {
      data() { return { message: 'I am secondary.' } }
    }

**Example.vue**

<script>
    import { exampleMixin } from '../mixins/exampleMixin.js'
    export default {
      mixins: [exampleMixin],
      data() {
        return {
          message: 'I take priority.'
        }
      },
      created() {
        console.log(this.message)
      }
    }
</script>

元件和mixinx都有message，Vue會使用元件的message:
---

### Merging Object Options
上面說的都是data裡發生衝突的情況，那萬一是methods, props這類object發生衝突呢？

**exampleMixin.js**

export const exampleMixin = {
  methods: {
    hello() {
      console.log('Hello from the mixin!')
    }
  }
}

**Example.vue**

<script>
    import { exampleMixin } from '../mixins/exampleMixin.js'
    export default {
      mixins: [exampleMixin],
      methods: {
        hello() {
          console.log('Hello from the component.')
        }
      }
    }
</script>

元件和mixinx都有methods hello，Vue仍會使用元件中的methods。
result: `Hello from the component.`

---
refferences:
https://cythilya.github.io/2017/09/24/vue-mixins/
https://vuejs.org/v2/guide/mixins.html
https://www.vuemastery.com/courses/next-level-vue/mixins/