大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~Nu628資訊網(wǎng)——每日最新資訊28at.com

最近需要需要封裝一套字典數(shù)據(jù)，給團(tuán)隊(duì)中的所有項(xiàng)目使用，因?yàn)楫吘棺值溥@東西，是很通用的，所以封裝一套公用的字典數(shù)據(jù)，也是很有必要的~Nu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

一、字典封裝

在項(xiàng)目開(kāi)發(fā)中，字典是不可或缺的一部分，字典一般就是一個(gè)不會(huì)頻繁修改的集合，字典的作用一般是用來(lái)做：Nu628資訊網(wǎng)——每日最新資訊28at.com

• 下拉框選擇
• 表格數(shù)據(jù)的回顯
• 其他用處

Nu628資訊網(wǎng)——每日最新資訊28at.com

1.下拉框選擇

這個(gè)相信是用的最多的，項(xiàng)目中會(huì)有許許多多的下拉框，這些下拉框其實(shí)基本都是不變的，且可能很多個(gè)頁(yè)面的下拉框都會(huì)共用同一個(gè)字典Nu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

2.表格回顯

比如你在添加表格數(shù)據(jù)的時(shí)候，你傳的是字典值去后端，那么到時(shí)查詢表格數(shù)據(jù)回顯時(shí)，后端也是給你返回字典值的話，那么這時(shí)你需要通過(guò)字典值去匹配出字典文本顯示在表格上~Nu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

3.其他用處

當(dāng)然字典也有其他用處，比如你需要拿這個(gè)字典列表去展示到頁(yè)面上，或者其他不同的用戶。Nu628資訊網(wǎng)——每日最新資訊28at.com

4.思考

當(dāng)我們明白字典的用處之后，思考一下，我們需要從字典上獲取什么東西，才能實(shí)現(xiàn)上面三個(gè)功能呢？回顧總結(jié)一下三個(gè)要求：Nu628資訊網(wǎng)——每日最新資訊28at.com

• 下拉框列表展示：項(xiàng)目統(tǒng)一格式是{ label: string; value: string }[]
• 字典值匹配字典文本：怎么去匹配呢？其實(shí)使用map去匹配性能比較好
• 其他用處：其實(shí)我們也不敢保證哪里會(huì)用到，所以需要保留字典原始數(shù)據(jù)

所以其實(shí)封裝字典，最重要的是封裝三個(gè)數(shù)據(jù)：Nu628資訊網(wǎng)——每日最新資訊28at.com

• 字典原始數(shù)據(jù)
• 字典option格式數(shù)據(jù)
• 字典map

并且，每個(gè)項(xiàng)目中所需要用到的字典也是不同的，比如 A 項(xiàng)目只需要用到 5 個(gè)字典，而 B 項(xiàng)目需要用到 10 個(gè)字典，所以也需要提供一個(gè)開(kāi)關(guān)，讓項(xiàng)目自己去選擇需要哪些字典，而不是全量去請(qǐng)求字典Nu628資訊網(wǎng)——每日最新資訊28at.com

二、存在哪呢？

咱們的字典是需要狀態(tài)管理的，并響應(yīng)渲染到對(duì)應(yīng)的頁(yè)面上。Nu628資訊網(wǎng)——每日最新資訊28at.com

在現(xiàn)在的 Vue3 項(xiàng)目中，很多項(xiàng)目都會(huì)使用Pinia來(lái)進(jìn)行狀態(tài)管理，小部分 Vue2 遷移 Vue3 的項(xiàng)目還是會(huì)繼續(xù)使用Vuex來(lái)進(jìn)行狀態(tài)管理。Nu628資訊網(wǎng)——每日最新資訊28at.com

這兩個(gè)都是不錯(cuò)的狀態(tài)管理工具，字典存在里面，其實(shí)都能達(dá)到我們想要的效果。Nu628資訊網(wǎng)——每日最新資訊28at.com

但是我們想一個(gè)問(wèn)題，如果我們的字典數(shù)據(jù)封裝是基于Pinia或Vuex去封裝的，那就耦合在一起了，萬(wàn)一以后項(xiàng)目用了其他的狀態(tài)管理工具呢？那是不是我又得基于這個(gè)狀態(tài)管理工具去封裝一套？而且就算是只有Pinia和Vuex，我也得封裝兩套，但是我覺(jué)得我只想封裝一套就夠了，兩套的話維護(hù)起來(lái)成本高。Nu628資訊網(wǎng)——每日最新資訊28at.com

所以啊，可以選擇另外的東西來(lái)進(jìn)行狀態(tài)管理~我們不要去基于Pinia或Vuex去封裝，我們要基于Vue3去封裝，那么就只需要封裝一套了。Nu628資訊網(wǎng)——每日最新資訊28at.com

三、effectScope

effectScope是Vue3提供的一個(gè) API ，effectScope 可以有兩個(gè)作用：Nu628資訊網(wǎng)——每日最新資訊28at.com

• 收集副作用
• 全局狀態(tài)管理

第一個(gè)作用不是我們本文章的重點(diǎn)，重點(diǎn)是第二個(gè)作用。Nu628資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在 Vue3 最火的全局狀態(tài)管理工具肯定是 Pinia 了，那么你們知道 Pinia 的原理是什么嗎？原理就是依賴了 effectScope：Nu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

所以我們完全可以自己使用 effectScope 來(lái)實(shí)現(xiàn)自己的局部狀態(tài)管理，比如我們封裝一個(gè)通用組件，這個(gè)組件層級(jí)比較多，并且需要共享一些數(shù)據(jù)，那么這個(gè)時(shí)候肯定不會(huì)用 Pinia 這種全局狀態(tài)管理，而是會(huì)自己寫一個(gè)局部的狀態(tài)管理，這個(gè)時(shí)候 effectScope 就可以排上用場(chǎng)了。Nu628資訊網(wǎng)——每日最新資訊28at.com

vueuse 中的 createGlobalState 就是為了這個(gè)而生：Nu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

四、回到字典封裝

回到字典封裝，現(xiàn)在我們可以使用 effectScope來(lái)進(jìn)行狀態(tài)管理存儲(chǔ)了，首先我們自己封裝一個(gè)useGlobalStateNu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

接著需要用這個(gè)函數(shù)，來(lái)創(chuàng)建咱們的字典狀態(tài)管理，具體代碼如下，其實(shí)重點(diǎn)就在于，獲取某一個(gè)字典的時(shí)候，需要獲取這三個(gè)東西：Nu628資訊網(wǎng)——每日最新資訊28at.com

• 原始數(shù)據(jù)
• options
• 映射對(duì)象map

Nu628資訊網(wǎng)——每日最新資訊28at.com

接著，我只需要在適當(dāng)?shù)臅r(shí)機(jī)，去請(qǐng)求字典就行了，一般都是放在初始化的時(shí)候去獲取的：Nu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

可以看出我們獲取到了我們想要的字典，并且具備響應(yīng)式渲染的效果：Nu628資訊網(wǎng)——每日最新資訊28at.com

Nu628資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-60941-0.html為啥我放棄用 Pinia 和 Vuex 去做字典狀態(tài)管理呢？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 麻了，這讓人絕望的大事務(wù)提交

下一篇： 從錯(cuò)誤中學(xué)習(xí): 了解Go編程的六個(gè)壞習(xí)慣