Vuex是做什麼的？

• 官方解釋：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。

  • 它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
  • Vuex 也整合到 Vue 的官方除錯工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。

• 狀態管理到底是什麼？

  • 狀態管理模式，集中式狀態管理這些名詞聽起來就非常高大上，讓人捉摸不透
  • 其實你可以簡單的將其看成把需要多個元件共享的變數全部儲存在一個物件中
  • 然後，將這個物件放在頂層的Vue例項中，讓其他元件可以使用
  • 那麼，多個元件是否可以共享這個物件中的所有變數屬性了呢？

管理什麼狀態呢？

• 但是有什麼狀態需要我們在多個元件中共享的呢？
  • 如果你做過大型專案，你一定遇到過多個狀態，在多個介面中共享的問題
  • 比如使用者的登入狀態、頭像、資訊、地理位置等等
  • 比如商品的收藏，購物車中的物品等等
  • 這些狀態資訊，我們都可以放在同一的地方，對它進行儲存和管理，而且它們還是響應式的

單頁面狀態管理

• 我們知道，要在單個元件中進行狀態管理是一件非常簡單的事情，我們來看下圖
  
  

• 圖中的3個狀態，解釋如下：

  • State：就是我們的狀態（姑且可以當做是data中的屬性）；
  • VIew：檢視層，可以針對state的變化，顯示不同的資訊；
  • Actions，這裡的Actions主要是使用者的各種操作：點選、輸入等等，會導致狀態的改變。

程式碼如下：

new Vue({

  // state

  data () {

    return {

      count: 0

    }

  },

  // view

  template: `

    <div>{{ count }}</div>

  `,

  // actions

  methods: {

    increment () {

      this.count++

    }

  }

})

多介面狀態管理

• Vue已經幫我們做好了單個介面的狀態管理，但如果是多個介面呢？
  • 多個檢視都依賴同一個狀態（一個狀態改了，多個介面需要進行更新）
  • 不同介面的Actions都想修改同一個狀態（比如：Home.vue要修改，Profile.vue也需要修改這個狀態）
• 也就是說對於某些狀態（狀態1/狀態2/狀態3）來說只屬於我們某一個檢視，但是也有一些狀態（狀態a/狀態b/狀態c）屬於多個檢視共同想要維護的
  • 狀態1/狀態2/狀態3你放在自己的房間，你自己管理自己用，沒問題
  • 但是狀態a/狀態b/狀態c我們希望交給一個大管家來統一幫助我們管理
  • 那麼Vuex就是幫助我們統一管理的大管家
• 全域性單例模式
  • 我們現在要做的就是將共享的狀態抽離出來，交給我們的大管家進行統一管理
  • 之後，我們的每個檢視，按照規定好的規定，進行訪問和修改操作
  • 這就是Vuex背後的思想

Vuex狀態管理圖例