VueのMixins(混入)

Mixins
Mixinsは、Vueコンポーネントで多重化可能な機能を配布する非常に柔軟な方法です.
いつ使いますか.Mixins

1.        ，               ，                    ？

ベースインスタンス
状態ブール値、モードボックス、プロンプトボックスを切り替える役割を果たす異なるコンポーネントのペアがあります.これらのプロンプトボックスとモードボックスには、機能に加えて、他の共通点はありません.それらは異なり、使い方は異なりますが、論理は同じです.

//    
const Modal = {
  template: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
}

//    
const Tooltip = {
  template: '#tooltip',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
}

解決策は次のとおりです.

const toggle = {
    data () {
        isshowing: false
    },
    methods: {
        toggleShow() {
            this.isshowing = !this.isshowing
        }
    }
}

//        
// mixins: [   ]

const Modal = {
  template: '#modal',
  mixins: [toggle],
  components: {
    appChild: Child
  }
};

const Tooltip = {
  template: '#tooltip',
  mixins: [toggle],
  components: {
    appChild: Child
  }
};

vue-cliで作成したプロジェクトで書くと、

// mixin.js

export const toggle = {
    data () {
        isshowing: false
    },
    methods: {
        toggleShow() {
            this.isshowing = !this.isshowing
        }
    }
}

// modal.vue
//  mixin     ，        toggleShow()  
import {mixin} from '../mixin.js'

export default {
    mixins: [mixin],
    mounted () {
        
    }
}
// tooltip    

結合
コンポーネントとブレンドオブジェクトに同じ名前のオプションが含まれている場合、これらのオプションは適切な方法でブレンドされます.
一、データオブジェクト内
mixinのデータオブジェクトとコンポーネントのデータが衝突した場合は、コンポーネントデータが優先されます.

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

二、フック関数
同じ名前のフック関数は配列にブレンドされ、呼び出されますが、オブジェクトに混入したフックはコンポーネント自体のフックの前に呼び出されます.

var mixin = {
  created: function () {
    console.log('          ')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('       ')
  }
})

// => "          "
// => "       "

三、値がオブジェクトのオプション
値はオブジェクトのオプションです.たとえば、methods、components、directivesのように、同じオブジェクトにブレンドされます.2つのオブジェクトのキー名が競合している場合は、コンポーネントオブジェクトのキー値のペアを取ります.

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

グローバル混入
グローバルブレンドは、各単一コンポーネントに登録されています.そのため、それらの使用シーンは極めて限られており、非常に注意しなければならない.私が考えることができる用途は、プラグインのように、すべてのものにアクセスする権限を与える必要があります.しかし、このような状況でも、私はあなたがやっていることに警戒しています.特にあなたがアプリケーションで拡張している関数は、あなたにとって知られていないかもしれません.

Vue.mixin({
    mounted() {
        console.log("  mixin");
    }
})

new Vue({
    ...
})

もう一度注意して、気をつけて使ってください.あの...logは各コンポーネントに表示されます.この状況は悪くありません(コンソールに余分な出力がある以外は)が、誤って使用されると、どれだけ有害かがわかります.
合理的な例を用いる

//         'myOption'        。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

まとめ
ブレンドは、多重化したいコードのセグメントをカプセル化するのに役立ちます.あなたにとってそれらはもちろん唯一の可能性ではありません.混合は良好で,状態を伝達する必要はないが,このモードはもちろん乱用される可能性がある.だから私たちはやはりよく考えて使う必要があります!!
例

import {mapGetters} from 'vuex'

//         scroll  bottom ，   playlist      
export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playList'
    ])
  },
  mounted() {
    this.handlePlaylist(this.playList)
  },
  activated() {
    this.handlePlaylist(this.playList)
  },
  watch: {
    playlist(newVal) {
      this.handlePlaylist(newVal)
    }
  },
  methods: {
    //            ，     
    handlePlaylist() {
      throw new Error('component must implement handlePlaylist method')
    }
  }
}