Vue組件之間的傳值

1、父傳子

1.父傳值

1.1父組件自定義一個數據（例如：ftosValue)

1.2經過自定義屬性的方式將ftosValue傳給子組件

2.子接值

2.1經過特定屬性：props來進行接收

2.2直接以屬性的方式來使用參數{{ ftos }}

2、子傳父

1.子傳值

1.1子組件中定義一個數據（例如：stof）

1.2經過自定義事件的方式將stof傳給父組件（格式：this.$emit('事件名',參數）

this.$emit('to',this.abc)

2.父接值

2.1給子組件實現方法：to

2.2方法中有一個參數，這個參數就是abc

3、兄弟傳值（解決兄弟之間的傳值）

1.建立一個公共的bus對象(bus.js)

2.將兄弟1的參數給bus

3.兄弟2中接收bus的參數

4、Vuex全局狀態數據管理

1.下載vuex包並導入use一下

2.須要new一下 寫上全局數據

3.須要掛載到new vue上

這個步驟是寫死的，下載使用腳手架直接就能夠選vuex

使用邏輯：操做全局vuex的state數據

正常狀況下必須dispatch(action)-->actions去commit觸發mutation-->mutation裏面才能修改state全局數據 / actions-->mutation-->修改state

其餘狀況也能夠跳過action去直接commit mutation-->修改state全局數據

使用Vuex

1.在state中定義數據

2.Getter至關於vue中的computed計算屬性，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算，Getters 能夠用於監聽、state中的值的變化，返回計算後的結果

3.給action註冊事件處理函數，當這個函數被觸發時候，將狀態提交到mutations中處理。actions裏面自定義的函數接收一個context參數和要變化的形參

4.mutations是一個對象裏面的方法都是同步，是更改state初始狀態的惟一的方法，具體的用法就是給裏面的方法傳入參數state或額外的參數

dispatch：含有異步操做，例如向後臺提交數據，寫法： this.$store.dispatch('action方法名',值)

commit：同步操做，寫法：this.$store.commit('mutations方法名',值)

Vuex怎麼合理規範管理數據，及mutations和actions區別

解析：此題考查vuex中數據的管理和數據結構的設計，還有mutations和actions的區別
解答：首先要明確一個特別重要的原則，就是否是全部的數據都要放在vuex中，由於vuex有一句名言:假如你並不知道爲何要使用vuex,那就不用使用它!

那什麼樣式的數據須要放在vuex中呢?首先這個數據要被多個組件頻繁用到,若是隻是被一個組件用到,那徹底沒有必要爲了使用vuex而使用vuex

舉例:一個網站用戶的暱稱,帳號,資料,像這種系統級別的信息,隨時可能在業務中展現和使用,若是在組件中儲存,那麼要獲取n次,因此係統級別的數據是須要放置在vuex中的,那麼系統級別數據也不能因此的放置,爲了讓數據看着更有層級結構,能夠按照像下面這樣設計

上面這種結構,一看便知道咱們應該哪裏貨物系統數據即設置數據

若是有些業務數據,也須要共享,最好按照模塊的具體業務含義分類,好比下面:

如上圖代碼所示,咱們很清晰的可以分清楚每一個模塊的數據,這樣不會致使數據管理的混亂

mutations和actions的區別

不一樣於redux只有一個action,vuex單獨拎出了一個mutations,它認爲更新數據必須是同步的,也就是隻要調用了提交數據方法,在mutation裏面才能夠修改數據

那麼若是咱們想作異步請求,怎麼作?這裏vuex提供了專門作異步請求的模塊,action,固然action中也能夠作同步操做,只不過度工更加明確,全部的數據操做,不管是同步仍是異步,均可以在action中完成

mutation只負責接收狀態,同步完成數據快照

因此能夠認爲

state => 負責存儲狀態

mutations => 負責同步更新狀態

actions => 負責獲取 處理數據(若是有異步操做必須在action處理 再到mutation),提交到mutation進行狀態更新

vuex模塊化module管理,使用的時候有注意事項

分析:當vuex維護數據愈來愈複雜的時候,模塊化解決方案
解析:使用單一的狀態樹,應用的全部狀態都會集中在一個比較大的對象上面,隨着項目需求的不斷增長,狀態樹也會變得愈來愈臃腫,增長了狀態樹維護的複雜度,並且代碼變得沉長;所以咱們須要modules(模塊化)來爲咱們的狀態樹分離成不一樣的模塊,每一個模塊擁有本身的state,getters,mutations,actions;並且容許每一個module裏面嵌套子module;以下:

上面的設計中,每一個vuex子模塊均可以定義state/mutations/actions

須要注意的是,咱們原來使用vuex輔助函數
mapMutations/mapActions引入的是全局的mutations和actions,而且咱們vuex子模塊也就是module1,module2...這些模塊的action/mutation也註冊了全局

也就是若是module1中定義了loginMutation,module2中也定義了loginMutation,此時,mutation就衝突了

若是重名,就報錯了...

若是不想衝突,各個模塊管理本身的action和mutation,須要給咱們的子模塊一個屬性namespaced:true

那麼組件中怎麼使用子模塊的action和mutations

步驟基本是死的 熟悉就行了

此題具體考察Vuex雖然是一個公共狀態,可是公共狀態還能夠切成若干個子狀態模塊,也就是moduels

解決當咱們的狀態樹過於龐大和複雜時的一種方案,可是筆者認爲,一旦用了vuex,幾乎就認定該項目是較爲複雜的