單向數據流
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控件中(通常是類表單操作)。