利用 Vue.prototype 來設定全域變數

在 Vue component 裏，隨時都有需要拿取一些設定的值，例如圖床的 domain，因為要組完整的圖片 url，例如某些功能是否要開啟，例如檔案大小的 MB 限制也要寫成設定，例如 api 的 endpoint，網址也不可能是 hard code, 也是統一透過一個設定而來。

寫成獨自的設定，不依賴後端傳設定，方便脫離後端。

我的做法是寫一隻 config，但是又需要丟進去給 Vue，
又不想直接 assing 給 window 物件 (如果要這麼公開的直接丟給 window，根本也不用寫 config.js，也很容易看到四散在各處的 window.xxx = 某個設定的值)
所以我就用了 Vue.prototype，集中管理所有跟設定有關的部分，傳給 Vue。

首先在專案的目錄的某處，放置這隻充滿設定的檔案，檔名我也叫 config.js

const CONFIG = {

 /**

  * [XSRF_TOKEN]

  * @description: xsrf_token

  * @docs: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie

  */

 XSRF_TOKEN: decodeURIComponent(document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*\=\s*([^;]*).*$)|^.*$/, "$1")),

 /**

  * [API_URL]

  * @description: 全站發 api 的 endpoint

  */

 API_URL: 'https://yiyingloveart.blogspot.com/demo',

 PHOTO_URL: 'https://static.xxxx.xxx/'

}

export { CONFIG };

接著在專案的主程式 以我來說是 main.js，import config 那隻檔案，另外 import 後命名為 SiteConfig. (*看個人習慣)

import { CONFIG as SiteConfig } from './config'

接著設定為 $conf，這樣做的方式跟 Vue.prototype.$conf = SiteConfig; 一樣

// inject all config for $conf

Object.defineProperty(Vue.prototype, '$conf', { value: SiteConfig });

接著就可以在整個站的 component 直接透過 this.$conf.YOUR_CONFIG 或者 $conf.YOUR_CONF 直接取得設定值


$ 命名
為什麼不叫 conf 而要 $conf, 其實要不要加 $ 這沒有一定，主要是用來提醒開發者，這個物件可能是共用設定或是第三方套件之類，或是一些保留使用的命名。就像 vue 也有 $mount, $ref 一樣，這些命名可以直覺得一眼感受到是共同使用的。

在 template 使用不需要 this, 在 script 裡面需要 this

例如:

在 template 用到:

<img :src="$conf.PHOHO_URL....">

在 script 用到:

if (this.$conf.ENABLE_FACEBOOK === true) {
   // do something!
}

如果有其他做法也歡迎留言讓大家知道!


參考
https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
[知乎] Vue.js 如何添加全局函数或变量?