Store 儲存之 dispatch && commit

---

一、存在即合理

---

1. Store

  當我們在使用 vue 時，同一個資料可能需要被多處複用，你可以選擇建立一個公共 data ，資料有了，但是，除錯將會變為噩夢。任何時間，我們應用中的任何部分，在任何資料改變後，都不會留下變更過的記錄。為了解決這種問題，Store 由此誕生，我們會將這個公共 data 放進 Store 中用於同一管理。（下面建立一個簡答 store）

// 一個簡單的 store
var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

• Tip：

    Store 中 state 的變更，都放在 Store 自身的 action 中去管理。這種集中式狀態管理能夠被更容易地理解哪種型別的變更將會發生，以及它們是如何被觸發。當錯誤出現時，會生成 log 記錄 bug 之前發生了什麼。

2. dispatch && commit

Action 如何管理呢 ？
  也由此而生，dispatch、commit 兩個不同的狀態管理方式出現，dispatch：用於非同步提交、修改資料，例如：我們的圖片、視訊等資源較大的資料，載入時無法快速渲染完成，此時就需要用非同步等待一點一點載入，同時還能進行一些別的“騷操作”，何樂而不為；commit：同步載入，一件件做事，不急也不慌。

---

二、dispatch

---

1. dispatch 存

this.$store.dispatch('initUserInfo',friend);

2. dispatch 取

this.$store.getters.userInfo;

---

三、commit

---

1. commit 存

this.$store.commit('initUserInfo',friend);

2. commit 取

this.$store.state.userInfo;