2017年9月18日 星期一

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

沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...