利用 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 如何添加全局函数或变量?

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源