前情回顧
告別Vuex，發揮compositionAPI的優勢，打造Vue3專用的輕量級狀態
製作一個輕量級的狀態管理外掛：Vue-data-state
原始碼
https：//gitee。com/naturefw/vue-data-state
線上演示
https：//naturefw。gitee。io/vite2-vue3-demo/
安裝
npm i nf-stateoryarn add nf-state
技術棧
vue3
compositionAPI
不支援vue2、TypeScript、vue-devTools
特點
輕量級：全部原始碼只有一百行左右。
簡單方便：相當於大號 reactive 的使用方式。
可以跟蹤狀態：記錄日誌，程式碼定位，監聽，外掛，初始化
其他
和 Vuex、pinia 做一下比較
有網友問我，和Vuex4、Vuex5（預覽版）、pinia的區別。
之前一直研究Vuex4和實現自己的想法，Vuex5只是聽說還不知道啥樣的，pinia也沒有留意。
但是問到了，那麼就需要去了解一下，順便學習一下先進經驗。
網上找了一下，資料比較少，只有一個對比介紹，B站還有一個影片介紹，看了之後確實有所收穫。
我想最大的區別就是設計思路的區別吧。
Vuex4：我的我的全是我的，getter、mutation、action、module等都要做到Vuex的內部。
Vuex5：不要那麼多了，只留下mutation、action即可，其他的自行處理。（如果理解有誤，還請多多批評）
pinia：輕量級（打包後1KB）、靈活註冊，也不要那麼多，留幾個主要的即可。（同上）
nf-state：借鑑MVC的思路，狀態管理本身只負責狀態和跟蹤，其他的操作交給controller處理，不用包括在狀態管理內部。元件可以直接獲取狀態，也可以透過controller來操作狀態。
nf-state 的設計思路
狀態管理負責的
狀態管理本身，只負責狀態的註冊和跟蹤，其他的操作都交給controller，controller可以按照模組或者功能點來劃分，這樣更易於維護。
狀態的分類
按使用範圍劃分：
全域性狀態
區域性狀態
按特點劃分：
普通狀態：直接使用reactive
只讀狀態：readonly套reactive
跟蹤狀態：proxy套reactive
如何實現跟蹤
使用proxy的set，對狀態的修改進行攔截，這樣就可以實現記錄狀態變化的日誌、監聽/攔截狀態的變化、設定鉤子實現外掛、持久化等功能，最後可以定位到改變狀態的程式碼的位置（元件名稱、函式名稱、程式碼行列數、修改時間等）
controller負責的
controller 實現狀態的具體操作方式，比如使用者狀態需要的使用者登入、使用者退出等具體的操作。
相當於把 Vuex 的getter、action、module拿出來單獨處理，利用 compositionAPI 的靈活性，更便於維護和複用。
元件負責的
元件的模板：在模板裡面可以直接使用```$state。xxx```來讀取狀態
程式碼：程式碼裡可以透過 import 的方式引入狀態，然後可以直接讀取狀態。
如果是簡單情況，可以直接修改狀態；
如果是複雜情況，可以透過controller來操作狀態。
因為狀態管理內部，可以使用proxy的set對狀態的改變進行跟蹤，也可以設定監聽和鉤子，想當然自帶mutation功能，所以我們可以不必透過mutation的方式來修改狀態。
