一篇文章徹底明白,vuex

上篇文章沒說的vuex,現在就來全面講講vuex。其實我們搞懂下面這幾個問題,就能真正理解vuex。

1、什麼是vuex?

vuex是一個專爲vue.js應用程序開發的狀態管理模式(它採用集中式存貯管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化)。

2、vuex的屬性?

state:
存儲數據,存儲狀態;在根實例中註冊了store 後,用 this.$store.state 來訪問;對應vue裏面的data;存放數據方式爲響應式,vue組件從store中讀取數據,如數據發生變化,組件也會對應的更新。
getter:
可以認爲是 store 的計算屬性,它的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變纔會被重新計算。
mutation:
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。
action:
包含任意異步操作,通過提交 mutation 間接更變狀態。
module:
將 store 分割成模塊,每個模塊都具有state、mutation、action、getter、甚至是嵌套子模塊。

3、vuex的數據傳遞流程?

在這裏插入圖片描述
當組件進行數據修改的時候我們需要調用dispatch來觸發actions裏面的方法。actions裏面的每個方法中都會有一個commit方法,當方法執行的時候會通過commit來觸發mutations裏面的方法進行數據的修改。mutations裏面的每個函數都會有一個state參數,這樣就可以在mutations裏面進行state的數據修改,當數據修改完畢後,會傳導給頁面。頁面的數據也會發生改變。

4、爲什麼要用vuex?

由於傳參的方法對於多層嵌套的組件將會非常繁瑣,並且對於兄弟組件間的狀態傳遞無能爲力。我們經常會採用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱,通常會導致代碼無法維護。所以我們需要把組件的共享狀態抽取出來,以一個全局單例模式管理。在這種模式下,我們的組件樹構成了一個巨大的“視圖”,不管在樹的哪個位置,任何組件都能獲取狀態或者觸發行爲!另外,通過定義和隔離狀態管理中的各種概念並強制遵守一定的規則,我們的代碼將會變得更結構化且易維護。

5、不用vuex會帶來什麼問題?

一、可維護性會下降,你要想修改數據,你得維護三個地方;
二、可讀性會下降,因爲一個組件裏的數據,你根本就看不出來是從哪來的;
三、增加耦合,大量的上傳派發,會讓耦合性大大的增加,本來Vue用Component就是爲了減少耦合,現在這麼用,和組件化的初衷相背。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章