第10章 Vuex組件狀態(tài)管理

第10章

Vuex組件狀態(tài)管理10.1

Vuex介紹官方狀態(tài)管理方案Vuex是Vue.js官方狀態(tài)管理解決方案,通過集中式狀態(tài)存儲和規(guī)范化數(shù)據(jù)流轉(zhuǎn)構(gòu)建可維護(hù)的應(yīng)用架構(gòu)五大核心特性單一狀態(tài)樹作為唯一數(shù)據(jù)源、顯式聲明狀態(tài)變更邏輯、封裝異步操作、派生狀態(tài)計算、模塊化組織單向數(shù)據(jù)流機(jī)制Stor容器強(qiáng)制實施View-Actions-Mutations-→State→View的數(shù)據(jù)流轉(zhuǎn),配合開發(fā)者工具實現(xiàn)狀態(tài)快照和時間旅行調(diào)試設(shè)計思想來源借鑒Flux、Redux和TheElmArchitecture的設(shè)計思想,專為Vue3設(shè)計,充分利用細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制與Pinia的關(guān)系Vue3推薦使用Pinia作為新一代狀態(tài)管理方案,但Vuex4仍保持對Vue3的兼容支持View2驅(qū)動應(yīng)用的數(shù)據(jù)源以聲明方式將State映射到視圖3ActionsView→Actions→響應(yīng)用戶輸入導(dǎo)致的狀態(tài)變化MutationsMutations接收Actions提交,變更StateState→State→ViewActionsVuex的解決方案多組件共享狀態(tài)的問題將共享狀態(tài)抽取為全局單例管理,組件樹形成巨大視圖,任意組件可獲取狀態(tài)或觸發(fā)行為多個視圖依賴同一狀態(tài)時傳參繁瑣,嵌套組件層層傳遞困難,兄弟組件件間狀態(tài)同步無力10.1

Vuex介紹10.2Vuex安裝包管理器安裝獨立構(gòu)建方式使用npm安裝:執(zhí)行'npminstallvuex@next--save'命從GitHub克隆代碼倉庫到本地使用yam安裝:執(zhí)行yarnaddvuex@next--save'命進(jìn)入vuex目錄,執(zhí)行yarn安裝依賴注意事項:需安裝支持Vue3的vuex@next版本,支持Vue2的版本名為Vuex(不帶@next)執(zhí)行yarnbuild構(gòu)建項目適用于需要使用dev分支最新版本的場景10.3Vuex的核心容器2不可直接修改改變store狀態(tài)的唯一途徑是顯式提交mutation,便于跟蹤每一個狀態(tài)的變化響應(yīng)式狀態(tài)組件注入Store當(dāng)Vue3組件從store讀取狀態(tài)時,若狀態(tài)發(fā)生變化,組件會得到高效更新通過app.use(store)安裝,組組件中使用this.Sstore訪問store實例關(guān)鍵語法createStore(state((.,mutations:(.)app.use(store)this.Smit'type')this.Sstore.statemapState輔助函數(shù)直接獲取狀態(tài)在計算屬性中返回store.state每當(dāng)store.state.count變化,計算屬性重新計算并觸發(fā)DOM更新Vuex通過插件系統(tǒng)將store注入所有子組件解決組件獲取多個狀態(tài)時的冗余問題對象寫法:"mapState({count:state=>state.count,countAlias:"count"})"數(shù)組寫法:"mapState("count))])映射同名屬性"組件通過this.Sstore訪問,無需步頻繁導(dǎo)入對象展開運算符:"..mapState(...3混入外部computed對象10.3Vuex的核心容器10.4

Vuex狀態(tài)獲取方法派生狀態(tài)的需求有時需要從store的state中衍生狀態(tài),例如對列表進(jìn)行過濾并計數(shù),在組件中重復(fù)計算會冗余定義Getter函數(shù)在store的getters中定義函數(shù),接受state作為第一個參數(shù),也可接受其他getter作為第二個參數(shù),實現(xiàn)getter之間的依賴State→Getter→Component屬性訪問方式Getter暴露在store.getters對象中,以屬性形式訪問,組件中使用計算屬性訪問:this.Sstore.getters.xx10.4Vuex狀態(tài)獲取方法mapGetters輔助函數(shù)函數(shù)訪問將store中的getter映射到局部計算屬性數(shù)組形式:...mapGetters("doneTodosCount","anotherGetter"])重命名形式:..mapGetters(doneCount:"doneTodosCount"})使用對象展開運算符混入computed對象通過getter返回一個函數(shù),實現(xiàn)給getter傳參適用場景:對store中的數(shù)組進(jìn)行查詢關(guān)鍵語法:getter返回(state)=>(id)=>的(state)=>(id)=>的柯里化函數(shù)調(diào)用方式:store.getters.getTodoByld(2)10.5Vuex狀態(tài)同步更改方法提交Payload定義Mutation對象風(fēng)格提交通過mit傳入額外參數(shù),即載荷;建議載荷使用對象形式;調(diào)用方式:mit(increment',10)在mutations中定義,包含type類型和handler回調(diào)函數(shù);handler第一個參數(shù)是state;handler不能直接調(diào)用,需通過mit觸發(fā)直接使用包含type屬性的對象提交;整個對象作為載荷傳給mutation函數(shù);調(diào)用方式:mittype:"inc-rement,amount:10);handler接收payload對象并讀取屬性更改store狀態(tài)的唯一方法是提交mutationTe10.yourmicatehaverangrebitorecomoratic.hadgmdltypenuhcreetateandma10.6Vuex狀態(tài)異步更改方法ActionvsMutation分發(fā)ActionActin提交的是mutation,而非直接變更狀態(tài)通過store.dispatch(觸發(fā):store.dispatch(increment')異步示例:在action內(nèi)部使用setTimeout執(zhí)行異步操作后commit組件中使用this.Sstore.dispatch0分發(fā)Action可以包含任意異步操作Action函數(shù)接受context對象,可調(diào)用contextcommit提交mutationmapActions輔助函數(shù)將methods映射為dispatch調(diào)用支持載荷形式和對象形式分發(fā)可通過context.state和context.getters獲取狀態(tài)和派生狀態(tài)10.6

Vuex狀態(tài)異步更改方法Promise組合1store.dispatch處理action返回的Promise,調(diào)用后仍返回Promise,可鏈?zhǔn)絫hen處理后續(xù)邏輯鏈?zhǔn)秸{(diào)用在action內(nèi)部組合其他action,通過dispatch("actionA").then(=>commit..)實現(xiàn)串行執(zhí)行async/await組合使用async/await語法簡化異步組合,先awaitdispatch("actionA),再執(zhí)行后續(xù)commit,代碼更清晰直觀實際應(yīng)用場景購物車結(jié)賬流程:備份購物車→發(fā)起AP請求→提交mutation記錄狀態(tài)變更(成功/失敗回調(diào))10.7

Vuex狀態(tài)模塊化管理模塊局部狀態(tài)命名空間默認(rèn)注冊在全局命名空間,多模塊可響應(yīng)同一action;mutation和getter的第一個參數(shù)是模塊局部state;action通過context.state訪問局部狀態(tài);根節(jié)點狀態(tài)通過context.rootState暴露;getter的第三個參數(shù)為rootState添加namespaced:true啟用模塊命名空間;getter/action/mutation自動加路徑前綴;createNamespacedHelpers創(chuàng)建指定命名空間的輔助函數(shù)動態(tài)注冊模塊重用store.registerModule(name,module)動態(tài)注冊模塊;store.unregisterMod