[Vue] 跟著 Vue 闖蕩前端世界 - 10 利用 Mixins 重複使用組件的方法

  • 4968
  • 0
  • Vue
  • 2018-05-07

當多數組件中有共同方法及物件是會被經常使用到的時候,絕對會希望抽出成獨立的方法讓所有組件重複使用,因此 Vue 提供幾個不同的方式來發便開發人員建立複用的機制,可以依照需求特性選擇作法。

複用方式的選擇


筆者依據使用情境歸納了幾個方式來達到 methods reuse 目的,使用方式如下:

  1. Vue.prototype: 與 Vue 組件較無相依性的方法 / 物件
  2. mixins: 少部分組件會使用到的共用 vue 方法
  3. global mixin: 幾乎全組件會使用到的共用 vue 方法

 

Vue.prototype


在組件中使用一些外部的功能都會使用 import 將物件 / 方法給載入,但是若是多數組件都會使用到的情況是否就有點多餘了,因此可以透過 JavaScript 的 prototype 將自行定義的方法 / 物件直接掛上 Vue 的實體上,這樣在每個Vue 組件中都可取用。

官方建議 prototype 的命名最好冠上 $ 符號,原因是避免與組件內的方法名稱衝到,另外就是開發慣例(ex. this.$router, this.$store) 好讓所有使用者一眼就可以理解這就是 prototype 阿!

 

此時可直接使用 $constant 物件,不再需要 import 後再 assign 值到 data 中才可以在 template 中使用囉!

 

mixins


在組件 methods 中有時候會存在一些共用性方法,我們可以把它集中在 commonMixin.js 檔案中,除了可以定義共用 methods 外,另可針對組件 data 及生命週期方法介入操作;本文先針對 method 進行介紹,其餘的請參考官方文件有非常詳細的說明。

/* commonMixin.js */
export default {
  methods: {
    // 切換讀取中遮罩的啟用與否
    switchLoadingMaskYo: function (isEnableLoaindMask) {
      if (isEnableLoaindMask) {
        this.$store.dispatch('app/enableLoadingMask')
      } else {
        this.$store.dispatch('app/disableLoadingMask')
      }
    }
  }
}

 

使用方式需傳入先前定義的 commonMixin 物件至組件 mixins 中,接著就可以直接使用了。

當 method 名稱與組件內的相同,叫用時會以組件內定義的方法為主喔!

 

 

global mixin


相較先前說明的 mixin 處理方式,這個 global mixin 表示不再需要在各個組件傳入 mixin 物件,直接透過全域定義即可讓所有組件都享有相同方法可以叫用,因此依據以上範例直接調整為下方代碼。

import Vue from 'vue'

Vue.mixin({
  methods: {
    // 切換讀取中遮罩的啟用與否
    switchLoadingMask: function (isEnableLoaindMask) {
      if (isEnableLoaindMask) {
        this.$store.dispatch('app/enableLoadingMask')
      } else {
        this.$store.dispatch('app/disableLoadingMask')
      }
    }
  }
})

 

此時已不需手動傳入 mixins 就可以直接叫用 global mixin 中所定義的方法了。

注意 global mixin 會影響到所有組件 (包括第三方套件中的 Vue 組件實體) ,因此若牽涉到 data 及生命週期類的 mixin 需特別謹慎使用。

 

 


希望此篇文章可以幫助到需要的人

若內容有誤或有其他建議請不吝留言給筆者喔 !