2020年7月3日 星期五




一直在想
這種胸前簍空的服裝
像 FGO 傻巴泳裝那樣
有沒有專有名詞

P 網差分
Read More ...

0 留言
2020年6月25日 星期四



前幾天看日蝕時腦中浮現的畫面
不要問我為什麼

另外端午節快樂…
熱到不行…
去 P 網消消暑吧
Read More ...

0 留言
2020年6月20日 星期六




好久沒寫技術文章
不對,好像從來沒寫過
不過先上圖,不然一定沒人看
第二張可以拿來訓練恥ㄌ…當桌布
下面要開始認真囉,被腿釣進來的可以先行離席了
離席後可去 P 網領差分

那,這次主要就是介紹幾個 vuex + typescript 的套件
你是否曾經因為沒有型別而感到不安、焦慮、甚至顫抖

最近接觸新專案,全是 js
而且專案都還蠻大的,在想好像該導入 ts 會比較容易維護
vue 的部分是還好,現在 vue 對 ts 的支援其實還不錯
比較大的問題是 vuex
dispatch, commit 沒有提示、型別檢查,是要成為通靈王嗎
所以找了幾套讓 vuex 可以有型別檢查的套件,需求是
1. component 中使用 state, getters, mutations, actions 要有型別
2. component 中不需 import 型別
3. 可以透過 this.$myStore.xxx 直接呼叫 (有的話最好)
最後挑出了這幾套

1. vuex-simple
2. vuex-tstore
3. vuex-ts-enhance
4. vuex-ts-action

下面附上各套使用範例

vuex-simple


github: https://github.com/sascha245/vuex-simple
npm: https://www.npmjs.com/package/vuex-simple

最推這套,寫起來最簡潔
module 就當一般 class 寫就好
新專案或 store 架構還不大推薦就用這套
缺點
module 非 vuex 原生寫法
還有就是因為寫在同一個 class 的關係
mutation, action 不能同名

example

import { Mutation, State, Action, createVuexStore, useStore, Module } from 'vuex-simple';

class UserModule {
@State()
public name: string = '';

@Mutation()
public updateName(name: string) {
this.name = name;
}

@Action()
public async patchName(payload: { name: string }) {
this.updateName(payload.name);
return 'name';
}
}

class RootModule {
@Module()
public user = new UserModule();
}

export const store = createVuexStore(new RootModule());
export const $tstore: RootModule = useStore(store);

// bind $tstore to vue instance
// state: this.$tstore.user.name
// mutation: this.$tstore.user.updateName()
// action: this.$tstore.user.patchName()



vuex-tstore


github: https://github.com/stevethedev/vuex-tstore
npm: https://www.npmjs.com/package/vuex-tstore

跟 vuex-simple 其實蠻類似的
不過可以用 vuex 原生的寫法
如果想要型別又沒辦法大改寫法可以先用這套頂著
缺點
相較 vuex-simple,呼叫方法時寫起來有點冗長
在 action 呼叫 action/mutation 時沒有型別

example

import TStore from 'vuex-tstore';

const userState = {
name: '',
};

const userModule = {
state: userState,
mutations: {
updateName(state: typeof userState, name: string) {
state.name = name;
},
},
actions: {
async patchName(ctx: any, payload: { name: string }) {
ctx.commit('updateName', payload.name);
return 'name';
},
},
};

const rootModule = {
modules: {
user: userModule,
},
};

export const $tstore = new TStore.Store(rootModule);
export const store = $tstore.store;

// bind $tstore to vue instance
// state: this.$tstore.modules.user.state.name
// mutation: this.$tstore.modules.user.mutations.updateName()
// action: this.$tstore.modules.user.actions.patchName()


vuex-ts-enhance

github: https://github.com/zWingz/vuex-ts-enhance#readme
npm: https://www.npmjs.com/package/vuex-ts-enhance

珍惜下班時間,遠離 store mapping
這是針對 store mapping 提供提示與型別檢查
相信大家都踩過 mapXXX 的雷
在前公司我們還限制不准用
原本想說有 vuex-tstore 應該就夠了
但發現現在的專案滿滿 mapXXX,崩潰潰
找到這套也蠻意外的
不過它提供很有限
缺點
只能用在兩層 module 的 store,不能再多
在 action 呼叫 action/mutation 時沒有型別
example

import { EnhanceStore } from 'vuex-ts-enhance';

const userState = {
name: '',
};

const userModule = {
state: userState,
mutations: {
updateName(state: typeof userState, name: string) {
state.name = name;
},
},
actions: {
async patchName(ctx: any, payload: { name: string }) {
ctx.commit('updateName', payload.name);
return 'name';
},
},
};

const rootModule = {
modules: {
user: userModule,
},
};

export const {
store,
mapActions,
mapMutations,
mapState,
} = new EnhanceStore(rootModule);

// import { mapAction, mapMutations, mapState } from {store path};
// ...mapActions('user', ['patchName'])
// ...mapMutations('user', ['updateName'])
// it will suggest you and give type checking, but it only support the 1-depth submodules.


vuex-ts-action


github: https://github.com/natsusola/vuex-ts-action#readme
npm: https://www.npmjs.com/package/vuex-ts-action

自肥
這套是我寫的,不過也只是做個 interface 而已
如上面兩套提到的缺點,action 呼叫 action/mutation 時沒有型別
所以這個就是讓你在 action 呼叫 action/mutation 時有提示 & 型別
缺點
寫起來有點麻煩,要一直加型別
因為定義的關係不能使用 ActionTree/MutationTree 那種一次全定義的
或有人可以跟我說怎麼寫

example

import Vuex from 'vuex';
import { TActionContext } from 'vuex-ts-action';

const state = {
name: '',
};
type state = typeof state;

const mutations = {
updateName(state: state, name: string) {
state.name = name;
},
};

const actions = {
async patchName(ctx: TActionCtx, payload: { name: string }) {
ctx.commit('updateName', payload.name);
return 'name';
},
};
type TActionCtx = TActionContext<typeof mutations, typeof actions>

const module = {
state,
mutations,
actions,
};

export const store = new Vuex.Store(module);


總結
這次找的過程其實也蠻有趣的
在找到 vuex-tstore, vuex-ts-enhance 時
其實它們都些不完善的地方
vuex-tstore 原本不支援提示 submodule 的 state
vuex-ts-enhance 原本不支援 mapMutation 和回傳 mutation/action 型別
因為要用到,所以我就抓下來發 PR 給作者
為了改那些東西也讓我對 ts interface 有更進一步的認識
回到套件
推薦 vuex-simple > vuex-tstore > vuex-ts-enhance
後面兩個可以配合 vuex-ts-action 使用
除非既有專案的 module 非常大了
不然還是 vuex-simple 寫起來最舒服
如果以上套件對你有幫助的話
可以在 github 上給作者星星喔

Read More ...

0 留言
2020年6月13日 星期六



福利就放 P 網了
Read More ...

0 留言
2020年6月8日 星期一



恭喜小鹿老師出新書了~
你以為裙子是被風吹起來的嗎?
其實是…《天啊!這女高中生裙子底下有槍啊!》
原插畫角色都超可愛的

書名決定的心路歷程蠻好笑的
編輯部的秘密!? 原來輕小說的書名是這樣取出來的!
https://reurl.cc/lVMEGY

Read More ...

0 留言
2020年6月7日 星期日


久違的把參考書拿出來畫一下
不然好像都只有買的當下會翻一下
前幾天又看到好幾本想要的書
雖然知道買了幾乎沒在看,但就是想要啊!
Read More ...

0 留言



隨便畫個
Read More ...

0 留言
2020年5月10日 星期日




母親節快樂~

Read More ...

0 留言
2020年5月4日 星期一



一直希望圖能夠事角色 + 小場景的形式,帶點箱庭感
但…背景真的好難 …
不對,真要說起來,畫畫好難 …
相比起來,寫個購物網站容易多了(遠目

差分請往 P 網

Read More ...

0 留言


Read More ...

0 留言
2020年4月25日 星期六


好久沒發文了
某種意義上也好久沒畫圖了
總覺得去的一趟很遠的地方(遠目
不管了,先來份雞排珍奶

珍奶半糖,就去喝開水 + 仙草
雞排要切,就去吃雞塊

不服來戰(X
Read More ...

0 留言
2020年4月3日 星期五



真的快被吵到失智,反應了也一樣 搞得現在對聲音很敏感 聽到噪音就會很暴躁 這邊也宣導下 - 愛惜您的腳,放輕您的腳步,請不要用腳後走路 或請穿具吸音效果的室內拖 - 地磚、牆壁粉刷不便宜,請不要敲擊牆壁地板 任何敲擊地板牆壁的聲音樓下都聽得見 - 小朋友在室內跑步很危險,請教導小朋友不要在家裡跑步 或是在小朋友活動範圍鋪上軟墊 - 為延長門的使用年限,請不要大力關門 - 桌腳跟人腳一樣值得愛惜,請小心輕放不要拖曳 或加裝軟墊 - 夜深了,光著身子容易著涼 請盡量不要在深夜洗澡,水流聲、熱水器聲是還好 但會有水錘效應,而且您無法確定洗澡時會敲到什麼 - 忙了一天,夜晚該讓自己休息一下 請盡量減少在深夜時行動,您無法保證移動時是不是會去 撞到什麼 - 以上聲音在平時就已經非常明顯,更不用說在夜深人靜時 尤其在別人正準備入睡時,那感受會被放大好幾倍 戴了耳塞一樣聽得見 *夜深人靜係指晚上九點後 不是說都不要發出聲音 但一吵就是一兩個小時誰受得了 請大家多加注意 除非想幫精神科做業績
Read More ...

0 留言
2020年1月16日 星期四


雞排發起來,小光發大財!

Read More ...

0 留言
2019年12月31日 星期二





2019 年的最後一張圖!
祝大家今天跨年愉快~!

如果沒人一起跨年感到空虛寂寞覺得冷…
可以購買  iobanana 貓掌健康按摩器 ,一個人跨年也能暖呼呼!
也很適合大家一起用,暖起來!震起來!

其實看到商品時就想這樣畫
只是最後採用四格漫畫的方式
但草稿放著也是放著,就把它畫完啦~

Read More ...

1 留言
2019年12月20日 星期五


一陣子沒發圖了
趕緊浮出幫大家補充一點糖分與熱量

差分請往 P 網~
Read More ...

0 留言