2020/11 Cola Daily Build

Daily Build
#1

JS 使用 scss/sass variable 的方法 (11/08)

在 js 裡使用 scss 變數

source: Javascript 中使用 scss/sass variable 的方法

#2

vuejs, vuex namespaced 與 vuex dynamic module registerModule

vuex 管理 state, 跨畫面 method 很好
但是爆用、濫用後 state 全場跑不是好事
action, getter state 也可能出現撞名或是重覆的問題

程式、檔案方面可以用 vuex module 解決，讓 domain 分類到各個檔案裡
但是載入的 module 依然是全域，撞名、重覆問還是存在!

官方推薦透過 namespace
https://vuex.vuejs.org/guide/modules.html#namespacing

個人認為，官方文件寫的不是很好…
再來則是加上 namespace 後用起 actino, getter… 實在是很卡

:love_you_gesture:
自己比較喜歡 vuex dynamic module registerModule import 的方式
在有需要的時候再 registerModule ，再依需求 unregisterModule

example:

import store from 'store';  // 載入 vuex 最常見的起手始 store/index.js
import myModule from './modules/myModule' // 預先寫好的 vuex module 內含 state, action 等...

const MODULE_NAME = "MY_MODULE"

// 不曉得為什麼我的 store.hasModule(MODULE_NAME) 不 work...
if (! store.state[MODULE_NAME]) {
  store.registerModule(MODULE_NAME, myModule);
}
// https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration

接下來就可以隨意使用這個 module 了 :confused:
可以在 component created 時 registerModule
destroyed 的時候 unregisterModule，依需求~~

其實不是什麼了不起的技巧，但是能避免很多問題
自己也有潔癖 XD

#3

css 去掉 input type number 後面的 上、下箭頭

source: 去掉 input type number 後面的 上、下箭頭

#4

javascript null chain, Optional chaining (?.)

可以用在快速檢查、取用特定變數、物件下的 method 或值是否存在並可用

舉例、情境，API 打回的結果取用或檢查

const response = {
  data: [
    {"name": "cola bear", "mode": "bear", "feat": () => "sleep"},
    {"name": "fat cola", "mode": "pig", "feat":  () => "eat"},
    {"name": "general  cola", "mode": "none"},
  ]
}

取用 feat 時還要注意檢查是不是真的有 feat() 這個方法可用

原做法～

data[0].feat && data[0].feta()

使用 null chain~

response.rows?.[0]?.feat?.()

ref.