狀態管理
vuex是一個專門為vue.js設計的集中式狀態管理架構。 沒理解 ! ! !
那么我們來看下邊這張圖:
當我們的應用遇到多個組件共享狀態時,會需要多個組件依賴於同一狀態抑或是來自不同視圖的行為需要變更同一狀態;傳參的方法對於多層嵌套的組件將會非常繁瑣,並且對於兄弟組件間的狀態傳遞無能為力。在搭建如上結構頁面時,你可能會對 vue 組件之間的通信感到崩潰 ,特別是非父子組件之間通信,此時就應該使用vuex,輕松可以搞定組件間通信問題。
簡單來說,vuex 就是對 vue 應用中多個組件的共享狀態進行集中式的管理(讀/寫)。
下邊來介紹一下vuex的幾個主要知識點:
mutations:是Vuex修改state的唯一推薦方法。該方法只能進行同步操作,且方法名只能全局唯一,也可以由actions中的commit('mutation 名稱')來觸發。
actions:actions和上面的Mutations功能基本一樣,不同點是,actions是異步的改變state狀態,而Mutations是同步改變狀態。
同步的意義在於這樣每一個 mutation 執行完成后都可以對應到一個新的狀態(和 reducer 一樣),這樣 devtools 就可以打個 snapshot 存下來,然后就可以隨便 time-travel 了。如果你開着 devtool 調用一個異步的 action,你可以清楚地看到它所調用的 mutation 是何時被記錄下來的,並且可以立刻查看它們對應的狀態----尤雨溪
commit:狀態改變提交操作方法。對mutation進行提交,是唯一能執行mutation的方法。
state:頁面狀態管理容器對象。集中存儲Vue components中data對象的零散數據,全局唯一,以進行統一的狀態管理。頁面顯示所需的數據從該對象中進行讀取,利用Vue的數據響應機制來進行高效的狀態更新。
getters:state對象讀取方法。Vue Components通過該方法讀取全局state對象。