vuex之單向數據流


單向數據流

State

State 用來存狀態。在根實例中注冊了store 后,用 this.$store.state 來訪問。

Getters

Getters 從 state 上派生出來的狀態。可以理解為基於 State 的計算屬性。很多時候,不需要 Getters,直接用 State 即可。

Mutations

Mutations 用來改變狀態。需要注意的是,Mutations 里的修改狀態的操作必須是同步的。在根實例中注冊了 store 后, 可以用 this.$store.commit('xxx', data) 來通知 Mutations 來改狀態。

Actions

Actions 通過調用 Mutations 來改狀態。Actions 可以包含異步操作。在根實例中注冊了 store 后, 可以用 this.$store.dispatch('xxx', data) 來存觸發 Action。

Vuex 的完整流程

組件中觸發 Action,Action 提交 Mutations,Mutations 修改 State。 組件根據 State 或 Getters 來渲染頁面。具體如下圖:

 

vuex解決了:
1.多個組件共享狀態時,單向數據流的簡潔性很容易被破壞:
2.多個視圖依賴於同一狀態。
3.來自不同視圖的行為需要變更同一狀態。 vuex使用場景:
中大型單頁應用,考慮如何更好地在組件外部管理狀態,簡單應用不建議使用。

向數據流

雙向數據綁定,帶來雙向數據流。數據(state)和視圖(View)之間的雙向綁定。

ng 里的 ng-model 和 vue 里的 v-model。 

說到底就是 (value 的單向綁定 + onChange 事件偵聽)的一個語法糖,你如果不想用 v-model,像 React 那樣處理也是完全可以的。

 特點:
無論數據改變,或是用戶操作,都能帶來互相的變動,自動更新。

使用場景:

需要實時反應用戶輸入的場合,適用於項目細節,如:UI控件中(通常是類表單操作)。

 


免責聲明!

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



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