Vuex 學習總結

2021-09-07 09:41:09 字數 3506 閱讀 7721

好在之前接觸過 flux,對於理解 vuex 還是很有幫助的。react 學到一半,後來因為太忙,就放棄了,現在也差不多都忘記了。不過感覺 vuex 還是跟 flux 還是有點區別的。

對於很多新手來說,只是閱讀文件是不好消化,我的建議是看看 vuex 的例項,通過研究例項來學習vuex。這樣就會好理解多了。如果還是不能理解,最好辦法就是先把store 的四個屬性:state, getters, mutations, actions 記下來,然後再分析四個屬性的特點,什麼地方會用到,是怎樣連線在一起的?通過這樣問自己問題來進行學習。

簡單來說,vuex 就是使用乙個 store 物件來包含所有的應用層級狀態,也就是資料的**。當然如果應用比較龐大,我們可以將 store 模組化,也就是每個模組都有自己的 store。分割方式見如下的**:

從上面的**我們也可以看出,乙個 store 有四個屬性:state, getters, mutations, actions。下面我將從這四個屬性開始講。

先來講state。state 上存放的,說的簡單一些就是變數,也就是所謂的狀態。沒有使用 state 的時候,我們都是直接在 data 中進行初始化的,但是有了 state 之後,我們就把 data 上的資料轉移到 state 上去了。當乙個元件需要獲取多個狀態時候,將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題,我們可以使用mapstate輔助函式幫助我們生成計算屬性,讓你少按幾次鍵:

其實就是把 state 上儲存的變數轉移到計算屬性上。當對映的計算屬性的名稱與 state 的子節點名稱相同時,我們也可以給mapstate傳乙個字串陣列。

computed: mapstate([

// 對映 this.count 為 store.state.count

'count'

])

為了更好地理解這個函式的作用,我們可以看看它的源**。

可以看到,mapstate 即可以接受物件,也可以接受陣列。最終返回的是乙個物件。並且 res[key] 的值都是來於 store 裡的,紅色那條**就是。這樣就把兩個不相關的屬性連線起來了,這也是對映。其他幾個輔助函式也是類似的。

getters上簡單來說就是存放一些公共函式供元件呼叫。getters 會暴露為store.getters物件,也就是說可以通過 store.getters[屬性]來進行相應的呼叫。mapgetters 輔助函式僅僅是將 store 中的 getters 對映到區域性計算屬性,其實也就是從 getters 中獲取對應的屬性,跟解構類似。具體如下圖

這樣我們就可以將 getters 中的 evenorodd 屬性值傳給對應元件中的 evenorodd 上。getters 接受 state 作為其第乙個引數,getters 也可以接受其他 getters 作為第二個引數。

mutations 與事件類似,更改 vuex 的 store 中的狀態的唯一方法是提交 mutation。所以mutations 上存放的一般就是我們要改變 state 的一些方法。

const store = new vuex.store(,

mutations:

}})

我們不能直接呼叫乙個 mutation handler。這個選項更像是事件註冊:「當觸發乙個型別為increment的 mutation 時,呼叫此函式。」要喚醒乙個 mutation handler,你需要以相應的 type 呼叫 store.commit 方法:

一條重要的原則就是要記住mutation 必須是同步函式

前面說了,mutation 像事件註冊,需要相應的觸發條件。而 action 就那個管理觸發條件的。

action 類似於 mutation,不同在於:action 提交的是 mutation,而不是直接變更狀態。action 可以包含任意非同步操作。 

actions: 

}

action 函式接受乙個與 store 例項具有相同方法和屬性的 context 物件,因此你可以呼叫context.commit提交乙個 mutation,或者通過context.statecontext.getters來獲取 state 和 getters。

實踐中,我們會經常會用到 es2015 的 引數解構 來簡化**(特別是我們需要呼叫commit很多次的時候):

actions: ) 

}

還記得我們前面說過 mutation 像事件型別嗎?因此需要我們給定某個動作來進行觸發。而這就是分發 action。action 通過store.dispatch方法觸發:

store.dispatch('increment')
此外,我們還可以在我們可以在 action 內部執行非同步操作:

actions: ) , 1000)

}}

你在元件中使用this.$store.dispatch('***')分發 action,或者使用mapactions輔助函式將元件的 methods 對映為store.dispatch呼叫(需要先在根節點注入store):

import  from 'vuex'

export default )

}}

這句話意思其實是,當你使用了mapactions, 你就不需要再次使用 this.$store.dispatch('***'),當你沒使用的話,你可以需要手動去分法。比如下面的**:

什麼時候用this.$store.dispatch('***'),什麼時候用mapactions 大家要根據情況而定的。

最後,問大家乙個問題,你知道什麼時候有擴充套件符 (...) 嗎? 不知道你有沒有注意,有些有擴充套件符,有些沒有。

Vuex 學習總結

好在之前接觸過 flux,對於理解 vuex 還是很有幫助的。react 學到一半,後來因為太忙,就放棄了,現在也差不多都忘記了。不過感覺 vuex 還是跟 flux 還是有點區別的。對於很多新手來說,只是閱讀文件是不好消化,我的建議是看看 vuex 的例項,通過研究例項來學習vuex。這樣就會好理...

vuex學習總結

vuex是針對於vue開發的狀態管理模式。採用的是集中式儲存管理應用的所有元件的狀態,並以響應的規則保證狀態以一種可 的方式發生變化。它也是類似於flux,redux和the elm architecture vuex和單純的全域性物件有兩個不同點 1 vuex的狀態儲存是響應式的。2 不能直接改變...

Vuex學習總結 Getters(4)

vuex例項的getters相當於計算屬性,getters的結果根據其依賴關係進行快取,並且在其依賴發生更改時才重新計算。getters將vuex例項的state作為第乙個引數。store index.js import vue from vue import vuex from vuex vue....