昨天將以前手刻的月曆元件引入後，今天目標是將月曆與底下列表做串接，但首先呢要先引入 Day.js 這個套件，並順便筆記一下在 Vue 中寫成 global method 的做法。

安裝 Day.js

因為一扯到日期相關的功能，就一定得要處理日期格式的問題。

這裡選擇使用之前有使用過的套件 Day.js，它的介紹相當簡潔有力：

Moment.js 的 2kB 輕量化方案，擁有同樣強大的 API。

也就是這是一個跟 Moment.js 一樣好用且又佔據更少加載資源的套件。安裝方式非常簡單：

npm install dayjs

輸入上面指令即可，接下來一樣要將日期格式化的方法寫成全站共用。

將日期格式處理寫成 global method

而將日期做格式化這件事想必是之後會一直用到，所以這邊會考慮先寫成全站可以共用的方法，那這個需求在 Vue 中通常不是寫成 mixins 就是寫成 plugins。

而雖然 mixins 有全局引用的寫法，但是根據官方的警語：

請謹慎使用全局混入，因為它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下，只應當應用於自定義選項，就像上面示例一樣。推薦將其作為插件發布，以避免重複應用混入。

所以 mixins 一般建議只有用在局部共用就好，而若要寫成全站共用最好還是寫成 plugins，變成我後來開發時大多都不太喜歡寫成 mixins ，而是利用下面的做法包成 plugins：

import Vue from 'vue'
import dayjs from 'dayjs'

const dateFormatDash = (date, format = 'YYYY-MM-DD') => {
  return date ? dayjs(date).format(format) : ''
}

const timeParserPlugin = {
  install(Vue, options) {
    Vue.prototype.$dateFormatDash = dateFormatDash
  }
}

Vue.use(timeParserPlugin)

這裡的 dateFormatDash 用途是利用 Day.js 將日期格式轉換為 YYYY-MM-DD，這樣的寫法可以在全站的元件中直接使用 this.$dateFormatDash() 這樣的寫法，舉個例子：

mounted() {
  const now = this.$dateFormatDash(new Date())
  this.currentDate = now
}

可以像上面這樣直接在某個元件中做使用，而不需要一直重寫。

再回到 plugin 中的內容，這邊利用 JavaScript 的 prototype 概念，將要讓全站共用的自定義的方法，掛到 Vue instance 的 prototype 上面：

Vue.prototype.$dateFormatDash = dateFormatDash

然後使用 Vue 中提供的 install 方法，將這一段包成 timeParserPlugin，最後再使用 Vue.use 來引入這個 plugin。

另外一種寫法也可以將 install 直接 export 出去，供其他外層檔案更彈性的使用 Vue.use，但基本上是一樣的意思，所以這裡就直接都寫在同一個檔案裡了：

export default {
  install(Vue, options) {
    Vue.prototype.$dateFormatDash = dateFormatDash
  }
}

參考資料

關於在 Vue 中各種 plugin 的寫法可以參考這篇文章 —— [Vue.js] global method 的復用。