什麼是 Vuex

Vuex 是 Vue.js 的官方外掛，它提供了一個集中式資料儲存，可在你的應用程式中使用。它受 Flux 應用程式架構的影響很大，該架構具有單向資料流，可實現更簡單的應用程式設計和推理。

在 Vuex 應用程式中，資料儲存區儲存所有共享應用程式狀態。該狀態由突變改變，突變是響應於通過排程員呼叫突變事件的動作而執行的。 ****

下圖中概述了 Vuex 應用程式中的資料流示例。 在麻省理工學院許可下使用的圖表，最初來自官方 Vuex GitHub 回購 。

各個 Vue.js 應用程式元件可以訪問儲存物件以通過 getter 檢索資料， getter 是返回所需資料的只讀副本的純函式。

元件可以具有操作，這些操作是對元件自己的資料副本執行更改的函式，然後使用排程程式來排程突變事件。然後，此事件由資料儲存區處理，資料儲存區根據需要更新狀態。

然後，變更會自動反映在整個應用程式中，因為所有元件都通過其 getter 被反應繫結到商店。

一個示例說明在 vue 專案中使用 vuex。

const state = {
    lastClickTime: null
}

const mutations = {
    updateLastClickTime: (state, payload) => {
      state.lastClickTime = payload
  }
}

const getters = {
  getLastClickTime: state => {
    return new Date(state.lastClickTime)
  }
}

const actions = {
    syncUpdateTime: ({ commit }, payload) => {
    commit("updateLastClickTime", payload)
  },
  asyncUpdateTime: ({ commit }, payload) => {
    setTimeout(() => {
      commit("updateLastClickTime", payload)
    }, Math.random() * 5000)
  }
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

const { mapActions, mapGetters } = Vuex;

// Vue 
const vm = new Vue({
    el: '#container',
  store,
  computed: {
      ...mapGetters([
        'getLastClickTime'
    ])
  },
  methods: {
      ...mapActions([
        'syncUpdateTime',
      'asyncUpdateTime'
    ]),
    updateTimeSyncTest () {
        this.syncUpdateTime(Date.now())
    },
    updateTimeAsyncTest () {
        this.asyncUpdateTime(Date.now())
    }
  }
})

和 HTML 模板相同：

<div id="container">
  <p>{{ getLastClickTime || "No time selected yet" }}</p>
  <button @click="updateTimeSyncTest">Sync Action test</button>
  <button @click="updateTimeAsyncTest">Async Action test</button>
</div>

1. 這裡狀態包含初始化為 null 的 lastClickTime 屬性。這種預設值的設定對於保持屬性具有反應性非常重要。州內未提及的屬性將可用，但此後所做的更改將無法使用 getter 訪問。

2. 使用的 getter 提供了一個計算屬性，每次突變更新 state 屬性的值時都會更新。

3. 只允許突變改變狀態及其屬性，即只有同步才能實現。

4. 可以在非同步更新的情況下使用 Action，其中 API 呼叫（此處由隨機定時的 setTimeout 模擬）可以在操作中進行，並且在獲得響應之後可以提交變異，以進行狀態更改。