一、概念
vuex是一個專為vue.js應用程序開發的狀態管理模式(它采用集中式存貯管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化)。
二、五大核心屬性
核心屬性為:state,getter,mutation,action,module
-
state:存儲數據,存儲狀態;在根實例中注冊了store 后,用
this.$store.state
來訪問;對應vue里面的data;存放數據方式為響應式,vue組件從store中讀取數據,如數據發生變化,組件也會對應的更新。 -
getters:可以認為是 store 的計算屬性,相當於 vue中的 computed,依賴於 state里面的值。它的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變才會被重新計算。
-
mutations:用於修改狀態,store里面的數僅能通過
mutations
里面的方法改變,但是必須是同步的。更改 vuex 的 store 中的狀態的唯一方法是提交 mutation,也就是$store.commit。 -
actions:包含任意異步操作,用它處理完后再觸發mutations來改變狀態。
-
module:將 store 分割成模塊,每個模塊都具有state、mutation、action、getter、甚至是嵌套子模塊。
三、vuex的數據傳遞流程
當組件進行數據修改的時候我們需要調用Dispatch來觸發Actions里面的方法。
actions里面的每個方法中都會有一個commit方法,當方法執行的時候會通過commit來觸發mutations里面的方法進行數據的修改。
mutations里面的每個函數都會有一個state參數,這樣就可以在mutations里面進行state的數據修改,當數據修改完畢后,會傳導給頁面。頁面的數據也會發生改變。