1.vuex是什么?
vuex是一個(gè)專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式余赢。采用集中式存貯管理應(yīng)用的所有組件的狀態(tài),并以響應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化扛拨。
2.vuex的核心概念
vuex的屬性:
1. state
存儲(chǔ)數(shù)據(jù)举塔,存儲(chǔ)狀態(tài)求泰;
在根實(shí)例注冊(cè) store 后,用this.$store.state 來訪問计盒,對(duì)應(yīng)vue里面的data;
存儲(chǔ)數(shù)據(jù)的方式為響應(yīng)式,vue組件從store中讀取數(shù)據(jù),如數(shù)據(jù)發(fā)生變化暖庄,組件也會(huì)更新
2. getter
可以說是store 的計(jì)算屬性楼肪,它的返回值會(huì)根據(jù)它的依賴被緩存起來,并且只要它的依賴發(fā)生變化才會(huì)被重新計(jì)算
3. mutation
更改 vue 中 store 狀態(tài)的唯一方法就是?mutation
提交更新數(shù)據(jù)的方法 this.$store.commit ()
必須是同步的
4. action
用于處理異步任務(wù)
提交?mutation 間接變更的狀態(tài)肩钠,通過方法 this.$store.dispatch ()
5. module
將 store分割成模塊暂殖,每個(gè)模塊都有?state、?mutation呛每、action晨横、甚至是嵌套子模塊
vuex的數(shù)據(jù)傳遞流程:
當(dāng)組件進(jìn)行數(shù)據(jù)修改的時(shí)候,我們需要調(diào)用dispatch 來觸發(fā) actions 里面的方法手形。actions 里面的每一個(gè)方法都有一個(gè) commit 方法库糠,方法執(zhí)行的時(shí)候會(huì)通過commit 來觸發(fā)moutations 里面的方法進(jìn)行數(shù)據(jù)的修改。moutations 里面的每個(gè)函數(shù)都有一個(gè)state 參數(shù)曼玩,這樣就可以在moutations 里面修改 state ,當(dāng)數(shù)據(jù)修改完畢后豫尽,會(huì)傳給頁面顷帖,頁面的數(shù)據(jù)同時(shí)也改變渤滞。
3.為什么要用vuex?
在業(yè)務(wù)邏輯稍復(fù)雜后妄呕,組件間的通信會(huì)非常多嗽测,那么此時(shí)使用vue自帶的父=>子、子=>父唠粥、兄弟節(jié)點(diǎn)通信的方案會(huì)非常的繁瑣和冗余晤愧,面對(duì)這種問題,需要一種能夠更加清晰便捷的數(shù)據(jù)管理方案來進(jìn)行
vuex則將各組件共同使用的數(shù)據(jù)提升到vuex的store中去存儲(chǔ)和維護(hù)(修改)官份,那么就不需要在組件間冗余的傳遞數(shù)據(jù)了舅巷。
vuex的優(yōu)勢(shì):
1. vuex集中統(tǒng)一管理數(shù)據(jù),避免了組件間頻繁繁瑣的數(shù)據(jù)傳遞操作钠右;
2. vuex中的數(shù)據(jù)響應(yīng)式的,只要數(shù)據(jù)變化们陆,所有使用數(shù)據(jù)的組件都會(huì)自動(dòng)得到更新情屹;
3. 數(shù)據(jù)的每次變化都會(huì)被記錄下來,便于后續(xù)回溯問題定位錯(cuò)誤椅文,可以方便的用于收集線上bug復(fù)現(xiàn)用戶的使用場(chǎng)景惜颇。