vuex 4.0
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中存儲管理應(yīng)用的所有組件的狀態(tài)的方式，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。
兩種使用方法：
第一種使用方式，就是按照官方的說法，只處理狀態(tài)，不管其他的功能。
第二種使用方式，就是從代碼的角度來看，完全可以當(dāng)作大號data來使用。當(dāng)然這種做法容易被噴，至于好不好，誰用誰清楚。
官網(wǎng)圖片
https://next.vuex.vuejs.org/
官方給了兩個流程圖，一個簡單的，我們就不看了。
還有一個復(fù)雜一點的，如下圖：
研究了好久，總算是了解了一點。并且嘗試翻譯了一下。
翻譯圖片
應(yīng)該沒有翻譯錯吧。
- 后端API，
不太理解，為啥設(shè)置了可以直接訪問后端的方法，前端的狀態(tài)和后端有啥關(guān)系呢？目前能想到的就只有登錄狀態(tài)了。
組件問vuex，用戶登錄了沒？vuex就只能問后端。
等等，不是應(yīng)該在前端緩存一個登錄狀態(tài)嗎？
用戶在登錄頁面完成登錄后，后端會返回一個token，然后緩存在前端，以后其他地方問是否登錄，直接看這個token不就可以了嗎？為啥還有問后端要數(shù)據(jù)？
如果不需要的話，我就想不出來還有啥狀態(tài)關(guān)系到后端API了。
所以另一個理解就是，vuex其實是支持直接從后端獲取數(shù)據(jù)，然后存入state的，也就是說可以把state當(dāng)作大號data來看待。
- 流程
- 組件發(fā)起一個申請，要獲得一個狀態(tài)。
- action收到申請后，可以去后端詢問，然后通過 commit（mutations） 把需要的狀態(tài)寫入 state 里面，這是可以通過瀏覽器插件看到 state 的數(shù)據(jù)。
- 最后通過 getters 返回給組件。
我在這個流程里面加上了一個前端存儲的功能，也就是說可以把 state 存在前端，這樣刷新、關(guān)掉瀏覽器、關(guān)機重啟等情況，state 的數(shù)據(jù)都不會丟失了。便于恢復(fù)狀態(tài)。
state 的類型
我們先來定義一個簡單的state，看看在vue3里面有什么變化。
state: {
count: 0,
myObject: {
time: '現(xiàn)在的時間'
}
}
一個簡單類型（number）的count，還有一個引用類型的myObject。
我們打印出來看看效果：
const store = useStore()
// 看看state的類型
console.log('state：', store.state)
console.log('state.count：', store.state.count)
console.log('state.myObject：', store.state.myObject)
state
整個state變成了reactive的形式，看來在vue3里面，vuex直接采用reactive來實現(xiàn)state的響應(yīng)性。state里的簡單類型
簡單類型沒有啥變化，沒有變成ref的形式，所以直接使用簡單類型的話，還是需要以前的方式。state 里面的引用類型
直接查看 state 的時候，里面的對象還是普通對象，但是當(dāng)單獨看的時候就變成了 reactive 的形式。
這是啥時候變的？想不出來。state 的數(shù)據(jù)能不能用 reactive？
嘗試了一下，可以用，不會報錯，也會正常運行，但是由于 vuex 可以自動把普通對象變成 reactive 的形式了，那么我們再自己加上就沒啥意義了。state 的數(shù)據(jù)能不能用 ref ？
這個也嘗試了一下，可以用，但是有點小變化。
如果是簡單類型的 ref，ref 會失效、消失，直接變成普通的簡單類型。
如果是對象類型的 ref，會變成 reactive 的形式。
所以用 ref 也是沒啥意義。
未完待續(xù)。。。
在線演示：
https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/
源碼：
https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex
