Vuex 學習總結

好在之前接觸過 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.state和context.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 學習總結

Vuex 學習總結

vuex學習總結

Vuex學習總結 Getters（4）

Vuex 學習總結

Vuex 學習總結

vuex學習總結

Vuex學習總結 Getters（4）

相關推薦