Vuex——Vue的狀態管理利器

檢視最簡單的一個 Vuex 狀態管理的示例。

從例子中可以看出，要改變一個 state，必須要在 mutations 定義一個方法，這個方法可以接收兩個引數，第一個是 state 屬性，用來訪問想要的狀態，第二個是一個 payload（荷載），這個 payload 可以是一個值，也可以是一個物件，是傳入用於處理物件的引數。

定義好 mutation 方法之後，我們需要在需要的時候定義 commit 方法來提交定義好的 mutation 方法，並且按它的要求傳入相應的 payload，commit 方法是屬於我們的狀態樹全域性單例的方法，我們可以透過 store.commit() 來呼叫，或者在全域性注入 store 之後，在任何地方都可以吃透過 this.$store.commit() 來定義提交方法。我們這裡將它定義在按鈕的點選事件中：

plus () {
  store.commit('plus', {num: 10})
}

在上面的方法定義，我們可以把對應的 mutation 名字也併入到 payload 中，一次性傳入：

plus () {
  store.commit({type: 'plus', num: 10})
}

最後，為了頁面能夠監測到 state 的值，我們可以透過計算屬性來訪問狀態：

computed: {
  count () {
    return store.state.count
  }
}

這樣，一次單向資料流的狀態管理過程就實現了。