源碼
https://gitee.com/naturefw/vue-data-state
在線演示
https://naturefw.gitee.io/vite2-vue3-demo/
安裝
npm i nf-state
or
yarn add nf-state
技術(shù)棧
- vue3
- compositionAPI
不支持vue2、TypeScript娘赴、vue-devTools
特點(diǎn)
- 輕量級(jí)：全部源碼只有一百行左右豹障。
- 簡(jiǎn)單方便：相當(dāng)于大號(hào) reactive 的使用方式医寿。
- 可以跟蹤狀態(tài)：記錄日志，代碼定位亡问，監(jiān)聽倦挂，插件，初始化
- 其他
和 Vuex趣斤、pinia 做一下比較
有網(wǎng)友問我，和Vuex4黎休、Vuex5（預(yù)覽版）浓领、pinia的區(qū)別。
之前一直研究Vuex4和實(shí)現(xiàn)自己的想法势腮，Vuex5只是聽說還不知道啥樣的联贩，pinia也沒有留意。
但是問到了捎拯，那么就需要去了解一下泪幌，順便學(xué)習(xí)一下先進(jìn)經(jīng)驗(yàn)。
網(wǎng)上找了一下，資料比較少祸泪，只有一個(gè)對(duì)比介紹吗浩，B站還有一個(gè)視頻介紹，看了之后確實(shí)有所收獲浴滴。
我想最大的區(qū)別就是設(shè)計(jì)思路的區(qū)別吧拓萌。
Vuex4：我的我的全是我的岁钓，getter升略、mutation、action屡限、module等都要做到Vuex的內(nèi)部品嚣。
Vuex5：不要那么多了，只留下mutation钧大、action即可翰撑，其他的自行處理。（如果理解有誤啊央，還請(qǐng)多多批評(píng)）
pinia：輕量級(jí)（打包后1KB）眶诈、靈活注冊(cè)，也不要那么多瓜饥，留幾個(gè)主要的即可逝撬。（同上）
nf-state：借鑒MVC的思路，狀態(tài)管理本身只負(fù)責(zé)狀態(tài)和跟蹤乓土，其他的操作交給controller處理宪潮，不用包括在狀態(tài)管理內(nèi)部。組件可以直接獲取狀態(tài)趣苏，也可以通過controller來操作狀態(tài)狡相。
nf-state 的設(shè)計(jì)思路
狀態(tài)管理負(fù)責(zé)的
狀態(tài)管理本身，只負(fù)責(zé)狀態(tài)的注冊(cè)和跟蹤食磕，其他的操作都交給controller尽棕，controller可以按照模塊或者功能點(diǎn)來劃分，這樣更易于維護(hù)彬伦。
狀態(tài)的分類
按使用范圍劃分:
- 全局狀態(tài)
- 局部狀態(tài)
按特點(diǎn)劃分：
- 普通狀態(tài)：直接使用reactive
- 只讀狀態(tài)：readonly套reactive
- 跟蹤狀態(tài)：proxy套reactive
如何實(shí)現(xiàn)跟蹤
使用proxy的set萄金，對(duì)狀態(tài)的修改進(jìn)行攔截，這樣就可以實(shí)現(xiàn)記錄狀態(tài)變化的日志媚朦、監(jiān)聽/攔截狀態(tài)的變化氧敢、設(shè)置鉤子實(shí)現(xiàn)插件、持久化等功能询张，最后可以定位到改變狀態(tài)的代碼的位置（組件名稱孙乖、函數(shù)名稱、代碼行列數(shù)、修改時(shí)間等）
controller負(fù)責(zé)的
controller 實(shí)現(xiàn)狀態(tài)的具體操作方式唯袄，比如用戶狀態(tài)需要的用戶登錄弯屈、用戶退出等具體的操作。
相當(dāng)于把 Vuex 的getter恋拷、action资厉、module拿出來單獨(dú)處理，利用 compositionAPI 的靈活性蔬顾，更便于維護(hù)和復(fù)用宴偿。
組件負(fù)責(zé)的
組件的模板
在模板里面可以直接使用$state.xxx來讀取狀態(tài)代碼
代碼里可以通過 import 的方式引入狀態(tài)，然后可以直接讀取狀態(tài)诀豁。
如果是簡(jiǎn)單情況窄刘，可以直接修改狀態(tài)；
如果是復(fù)雜情況舷胜，可以通過controller來操作狀態(tài)娩践。
因?yàn)闋顟B(tài)管理內(nèi)部，可以使用proxy的set對(duì)狀態(tài)的改變進(jìn)行跟蹤烹骨，也可以設(shè)置監(jiān)聽和鉤子翻伺，想當(dāng)然自帶mutation功能，所以我們可以不必通過mutation的方式來修改狀態(tài)沮焕。
