Pinia被鼓吹的setup寫(xiě)法真的好用嗎
作者：大臉怪
原文：https://juejin.cn/post/7271076750351548457
引用官方的一句話：Pinia是一個(gè)符合直覺(jué)的 Vue.js 狀態(tài)管理庫(kù)
簡(jiǎn)單說(shuō)幾點(diǎn)它的特性：
- 它支持Vue3，同時(shí)也支持Vue2，是Vuex的完美過(guò)渡替代者
- 它極致輕量化，只有
1kb左右大小 - 它類型安全，支持TypeScript，類型可自動(dòng)推斷，**
即使在 JavaScript 中亦可為你提供自動(dòng)補(bǔ)全功能！**(劃重點(diǎn))
Pinia的兩種寫(xiě)法
Pinia支持兩種寫(xiě)法，跟Vue3一樣，既支持選項(xiàng)式（options）寫(xiě)法，也支持組合式（setup）寫(xiě)法
舉個(gè)例子
選項(xiàng)式寫(xiě)法
export const useCounterStore = defineStore('main', {
state: () => ({
count: 0,
}),
getters: {
double() {
return this.count * 2
}
},
actions: {
increment() {
this.count++
}
},
})
組合式寫(xiě)法
import { computed } from 'vue'
export const useCounterStore = defineStore('main', () => {
const count = ref(0)
const double = computed(() => {
return count.value * 2
})
function increment() {
count.value++
}
return { count, double, increment }
})
確實(shí)，跟Vue3的兩種寫(xiě)法不能說(shuō)很像，基本是一模一樣
由于例子比較簡(jiǎn)單，所以兩種寫(xiě)法看著都挺簡(jiǎn)潔的，但是既然有兩種寫(xiě)法，自然就有了比較，如果是你，你更傾向于哪種寫(xiě)法呢
起初我是使用 options 寫(xiě)法的，不是說(shuō)我喜歡 optioons 寫(xiě)法，而是因?yàn)槲矣玫帽容^早，那時(shí)還不支持 setup 寫(xiě)法，后面 setup 寫(xiě)法出來(lái)了我也是第一時(shí)間去嘗試，由于 Vue3 我是一直在使用 setup 寫(xiě)法，所以我也是比較熱衷于這種寫(xiě)法
但是當(dāng)我慢慢切換到 setup 寫(xiě)法，我發(fā)現(xiàn)有幾點(diǎn)弊端，或者說(shuō)用著不爽的地方
setup寫(xiě)法的弊端
- 必須將定義的
ref、計(jì)算屬性和function在末尾通過(guò)return的方式暴露出去（用不到的可不暴露）
準(zhǔn)確的說(shuō)這點(diǎn)不能叫做弊端，它其實(shí)就是
hooks的寫(xiě)法，寫(xiě)習(xí)慣了也還好，但就是因?yàn)檫@一點(diǎn)，它就做不到跟<script setup> </script>一致的寫(xiě)法，這不能說(shuō)是弊端，因?yàn)橥暾?setup的寫(xiě)法其實(shí)就是這樣的，只不過(guò)是Vue對(duì)開(kāi)發(fā)者太友好了，提供了<script setup> </script>這樣的語(yǔ)法糖進(jìn)一步減少開(kāi)發(fā)者的負(fù)擔(dān)
- 無(wú)法使用store實(shí)例的
$reset方法重置狀態(tài)，需要重置狀態(tài)時(shí)需自行定義方法一個(gè)個(gè)重置，相對(duì)麻煩一點(diǎn) - 在
JavaScript中會(huì)丟失類型推斷，無(wú)法提供自動(dòng)補(bǔ)全功能，也無(wú)法通過(guò)F12跳轉(zhuǎn)定義
還記得開(kāi)頭的劃重點(diǎn)嗎，沒(méi)錯(cuò)，使用 setup 寫(xiě)法會(huì)丟失這一非常重要的特性，還毫無(wú)疑問(wèn)會(huì)極大的降低開(kāi)發(fā)效率，這也是我最無(wú)法忍受的一點(diǎn)。當(dāng)然，在 ts 中可以通過(guò)類型定義解決代碼提示，但這就不是 Pinia 的類型推斷了
基于以上幾點(diǎn)弊端，我又漸漸的從 setup 寫(xiě)法轉(zhuǎn)回 options 寫(xiě)法了，畢竟 options 寫(xiě)法最大的問(wèn)題就是當(dāng)代碼量非常多的時(shí)候需要上下代碼反復(fù)橫跳查看，有點(diǎn)影響代碼閱讀和理解，但其實(shí)如果注意模塊拆分的話時(shí)很難出現(xiàn)這種情況的，畢竟一般不會(huì)在 store 里面寫(xiě)大量的業(yè)務(wù)邏輯代碼
什么時(shí)候用setup寫(xiě)法
說(shuō)了這么多, 難道 setup 沒(méi)有一點(diǎn)可取之處嗎，不，我覺(jué)得存在即合理，還是有一定場(chǎng)景用 setup 更合適的
- 當(dāng)需要在
store中寫(xiě)大量的邏輯代碼時(shí)（很少有這種情況，但不排除個(gè)別業(yè)務(wù)確實(shí)有這個(gè)需要），那么多少行叫大量呢，這是一個(gè)主觀的詞，個(gè)人覺(jué)得超過(guò)150行就可以考慮使用setup寫(xiě)法了。當(dāng)然，沒(méi)人一開(kāi)始就知道會(huì)有多少行代碼，但是應(yīng)該有個(gè)大概的預(yù)判 - 使用
ts時(shí)，兩種方式都可以使用，看個(gè)人喜好，沒(méi)有太大的區(qū)別 - 如果你極其反感
options寫(xiě)法，并且熟悉hooks寫(xiě)法的話，別猶豫，用setup就對(duì)了，畢竟無(wú)論哪種寫(xiě)法都可以實(shí)現(xiàn)需求，自己喜歡最重要
最后
如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我個(gè)小忙：
-
點(diǎn)個(gè)「喜歡」或「在看」，讓更多的人也能看到這篇內(nèi)容
-
我組建了個(gè)氛圍非常好的前端群，里面有很多前端小伙伴，歡迎加我微信「sherlocked_93」拉你加群，一起交流和學(xué)習(xí)
-
關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。
點(diǎn)個(gè)喜歡支持我吧，在看就更好了