IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
一、Vuex是什么
Vuex是專門為Vuejs應(yīng)用程序設(shè)計的狀態(tài)管理工具。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。是狀態(tài)管理,在main.js引入store,注入。只用來讀取的狀態(tài)集中放在store中; 改變狀態(tài)的方式是提交mutations,這是個同步的事物; 異步邏輯應(yīng)該封裝在action中。Vuex可以理解為一種開發(fā)模式或框架,通過狀態(tài)集中管理驅(qū)動組件的變化,應(yīng)用級的狀態(tài)集中放在store中,改變狀態(tài)的方式是提交mutations,異步邏輯封裝在action中。
應(yīng)用場景有:單頁應(yīng)用中,組件之間的狀態(tài)、音樂播放、登錄狀態(tài)、加入購物車vuex是一種集中式狀態(tài)管理模式,它按照一定的規(guī)則管理狀態(tài),保證狀態(tài)的變化是可預(yù)測的。
1、Vuex的構(gòu)成
由上圖,我們可以看出Vuex有以下幾個部分構(gòu)成:
1)state
state是存儲的單一狀態(tài),是存儲的基本數(shù)據(jù)。
2)Getters
getters是store的計算屬性,對state的加工,是派生出來的數(shù)據(jù)。就像computed計算屬性一樣,getter返回的值會根據(jù)它的依賴被緩存起來,且只有當(dāng)它的依賴值發(fā)生改變才會被重新計算。
3)Mutations
mutations提交更改數(shù)據(jù),使用store.commit方法更改state存儲的狀態(tài)。(mutations同步函數(shù))
4)Actions
actions像一個裝飾器,提交mutation,而不是直接變更狀態(tài)。(actions可以包含任何異步操作)
5)Module
Module是store分割的模塊,每個模塊擁有自己的state、getters、mutations、actions。
- const moduleA = {
- state: { ... },
- mutations: { ... },
- actions: { ... },
- getters: { ... }
- }
- const moduleB = {
- state: { ... },
- mutations: { ... },
- actions: { ... }
- }
- const store = new Vuex.Store({
- modules: {
- a: moduleA,
- b: moduleB
- }
- })
- store.state.a // -> moduleA 的狀態(tài)
- store.state.b // -> moduleB 的狀態(tài)
6)輔助函數(shù)
Vuex提供了mapState、MapGetters、MapActions、mapMutations等輔助函數(shù)給開發(fā)在vm中處理store。
二、Vuex的設(shè)計思想
Vuex的設(shè)計思想,借鑒了Flux、Redux,將數(shù)據(jù)存放到全局的store,再將store掛載到每個vue實例組件中,利用Vue.js的細(xì)粒度數(shù)據(jù)響應(yīng)機制來進行高效的狀態(tài)更新。
小結(jié)
Vuex是通過全局注入store對象,來實現(xiàn)組件間的狀態(tài)共享。在大型復(fù)雜的項目中(多級組件嵌套),需要實現(xiàn)一個組件更改某個數(shù)據(jù),多個組件自動獲取更改后的數(shù)據(jù)進行業(yè)務(wù)邏輯處理,這時候使用vuex比較合適。假如只是多個組件間傳遞數(shù)據(jù),使用vuex未免有點大材小用,其實只用使用組件間常用的通信方法即可。
Vue組件簡單常用的通信方式有以下幾種:
1、父子通信:
父向子傳值,通過props;子向父傳值通過events ($emit);父調(diào)用子方法通過ref;provide / inject。
2、兄弟通信:bus
3、跨級嵌套通信:bus;provide / inject等。
Vuex可以理解為一種開發(fā)模式或框架,通過狀態(tài)集中管理驅(qū)動組件的變化,應(yīng)用級的狀態(tài)集中放在store中,改變狀態(tài)的方式是提交mutations,異步邏輯封裝在action中。
>>本文地址:http://uj2y2uok.com/zhuanye/2021/69830.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個方向的工作?