千鋒教育前端Vue3.0全套視頻教程(Kerwin2023版,Vue.js零基礎(chǔ)

Vuex 是 Vue.js 應(yīng)用中用于集中管理和狀態(tài)管理的插件。它采用了集中式的方式管理應(yīng)用的所有組件的狀態(tài),并提供了一系列的規(guī)則來(lái)確保狀態(tài)的一致性和可預(yù)測(cè)性。下面是對(duì) Vuex 的知識(shí)點(diǎn)進(jìn)行詳細(xì)總結(jié)和規(guī)整:
- 狀態(tài)管理模式:
- Vuex 使用狀態(tài)管理模式來(lái)管理應(yīng)用的狀態(tài)。狀態(tài)是驅(qū)動(dòng)應(yīng)用的唯一數(shù)據(jù)源,包含應(yīng)用的所有需要共享和響應(yīng)式更新的數(shù)據(jù)。
2.State:
state
是 Vuex 存儲(chǔ)應(yīng)用狀態(tài)的地方,它類(lèi)似于 Vue 組件中的data
,但是不同于組件的data
,state
是全局共享的,所有組件都可以訪(fǎng)問(wèn)和修改它。
3.Getter:
getter
是用于從state
中派生出一些狀態(tài)的方法。類(lèi)似于 Vue 中的計(jì)算屬性,getter
的返回值會(huì)根據(jù)依賴(lài)緩存起來(lái),只有當(dāng)依賴(lài)發(fā)生變化時(shí)才會(huì)重新計(jì)算。
4.Mutation:
mutation
是用于修改state
中的數(shù)據(jù)的方法。mutation
必須是同步函數(shù),并且是唯一可以修改state
的地方。通常在組件中通過(guò)commit
方法調(diào)用mutation
。
5.Action:
action
類(lèi)似于mutation
,但是action
可以包含異步操作,可以在action
中進(jìn)行數(shù)據(jù)獲取、調(diào)用后端接口等異步任務(wù),并最終提交mutation
來(lái)修改state
。
6.Module:
module
允許將store
分割成多個(gè)模塊,每個(gè)模塊都有自己的state
、getter
、mutation
、action
,從而更好地組織大型的狀態(tài)管理邏輯。
Vuex 數(shù)據(jù)流:
- 組件通過(guò)
dispatch
調(diào)用action
,action
再通過(guò)commit
調(diào)用mutation
,mutation
修改state
,組件從state
中讀取數(shù)據(jù)。
Vue 組件中使用 Vuex:
- 在 Vue 組件中,可以通過(guò)
this.$store
來(lái)訪(fǎng)問(wèn) Vuex 的state
、getter
、mutation
、action
,并通過(guò)mapState
、mapGetters
、mapMutations
、mapActions
等輔助函數(shù)簡(jiǎn)化訪(fǎng)問(wèn)和調(diào)用。
插件和嚴(yán)格模式:
- Vuex 支持插件機(jī)制,可以通過(guò)插件來(lái)擴(kuò)展 Vuex 的功能。
- Vuex 支持開(kāi)啟嚴(yán)格模式,通過(guò)在創(chuàng)建 Vuex 實(shí)例時(shí)傳入
strict: true
來(lái)開(kāi)啟,嚴(yán)格模式下,只能通過(guò)mutation
來(lái)修改state
,任何通過(guò)action
修改state
的行為都會(huì)拋出錯(cuò)誤
標(biāo)簽:
千鋒教育前端Vue3.0全套視頻教程(Kerwin2023版,Vue.js零基礎(chǔ)的評(píng)論 (共 條)
