Vuex的理解以及它的輔助函數


理解:vue中的“單向數據流”,這里借用官網的圖示:

 

Vue是單向數據流,v-model只是語法糖而已。單向數據流就是:數據總是【向下傳遞】從父級組件傳遞給子組件,只能單向綁定。子組件內部不能直接修改從父級傳遞過來的數據,當嘗試在子組件內部修改父組件的數據,vue將報錯。主要是為了組件解耦。(假如子組件可以修改父組件數據,那么一個子組件變化將會引發所有依賴這個數據的子組件發生變化,發生連鎖反應,所以vue不推薦子組件修改父組件數據,直接修改props會拋出警告)。


但是如果子組件(props里面存的是父級組件流下來的數據)想要修改父組件的值怎么辦呢?【主要是通過$emit定義事件】

定義一個局部變量,並用prop的值初始化它。

定義一個計算屬性,處理prop的值並返回。

 

而vuex解決的問題是:多個組件依賴於一個共同的狀態,變更一個組件的狀態,其他組件響應式的更新。所以需要將這些組件的共享狀態抽取出來,放在vue的最頂層,進行全局單例模式的管理。

  

vuex里面的state是變量狀態管理,進行渲染組件,組件調用時候是通過dispatch actions,狀態的改變需要進行commit mutations,主要是為了用vuejs devtools可以明確的追蹤到狀態的變化。

因為vuex是響應式的,所以在組件中調用store中的狀態僅僅需要在計算屬性computed【可以使用mapGetters進行狀態的獲取】中返回即可,觸發變化在mothods中提交mutation【里面是改變state狀態的一系列方法】就行。

 

Vuex除了Store對象,還對外提供了一系列的輔助函數,方便我們在代碼中使用Vuex,提供了操作store的各種屬性的一系列的語法糖,主要有mapState,mapGetters,mapActions,mapMutations,插件plugins選項。

參考鏈接:http://www.imooc.com/article/14741

1,state && mapState

state:vuex里的唯一數據源。當一個組件需要獲取多個狀態時候,將這些狀態都聲明為計算屬性比較冗余,所以就用mapState。

2,getter && mapGetter

getter:store中派生狀態,可以認為是store的計算屬性。mapGetter將store中的getter映射到局部計算屬性。

3,mutation && mapMutation

更改vuex中store中狀態的唯一方法:提交mutation。每個mutation都有一個事件類型(type)和一個回調函數。這些事件類型一般是用常量代替。

為什么mutation里面必須是同步函數?

主要是在mutation中混合異步調用會導致程序很難調試。用devtools很難追蹤狀態的改變。所以就定義了一個actions專門進行異步的處理。

一般都是使用mapMutations輔助函數將組建中的methods映射為store.commit調用(需要在根節點注入store)。

 4,action && mapActions

action類似於mutation,不同之處:

action提交的是mutation,而不是直接改變狀態。

action可以包含任意異步操縱。

5,module

當應用變得比較復雜時候,store對象有可能變的相當臃腫。在此情況下,vuex允許將store分割成模塊(module),每個模塊有自己的state,mutation,action,getter甚至是嵌套子模塊等。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM