為什麼要使用 Vuex

在構建大型應用程式（如單頁應用程式（SPA））時，這些應用程式通常由許多可重用的元件組成，因此很快就會難以構建和維護。這些元件之間的資料和狀態共享也可能很快崩潰，並且難以除錯和維護。

通過使用集中式應用程式資料儲存，可以在一個地方表示整個應用程式狀態，從而使應用程式更有條理。通過使用單向資料流，突變和通過限定元件資料訪問所需的資料，可以更容易地推斷元件角色以及它應如何影響應用程式狀態。

VueJS 元件是獨立的實體，它們不能輕易地在彼此之間共享資料。要在沒有 vuex 的情況下共享資料，我們需要將 emit 事件與資料一起使用，然後使用 on 監聽並捕獲該事件。

元件 1

this.$emit('eventWithDataObject', dataObject)

元件 2

this.$on('eventWithDataObject', function (dataObject) {
    console.log(dataObject)
})

安裝 vuex 後，我們可以簡單地從任何元件訪問其資料，而無需監聽事件。

this.$store.state.myData

我們還可以與 mutator 同步更改資料，使用非同步操作並使用 getter 函式獲取資料。

Getter 函式可以作為全域性計算函式。我們可以從元件訪問它們：

this.$store.getters.myGetter

行動是全域性方法。我們可以從元件中分發它們：

this.$store.dispatch('myAction', myDataObject)

並且突變是在 vuex 中更改資料的唯一方法。我們可以提交更改：

this.$store.commit('myMutation', myDataObject)

Vuex 程式碼看起來像這樣

state: {
  myData: {
    key: 'val'
  }
},
getters: {
  myGetter: state => {
     return state.myData.key.length
  }
},
actions: {
  myAction ({ commit }, myDataObject) {
    setTimeout(() => {
      commit('myMutation', myDataObject)
    }, 2000)
  }
},
mutations: {
  myMutation (state, myDataObject) {
    state.myData = myDataObject
  }
}