Vuex Dispatch詳解

Vuex是一個狀態管理庫，用於Vue.js應用程序的集中式狀態管理。它在應用程序中小心地管理和維護了一個狀態樹，並用它作為響應式存儲單一狀態源。Vuex中，我們可以使用dispatch()函數來觸發actions中定義的函數。

一、dispatch函數概述

dispatch函數是Vuex中一個被廣泛使用的函數，它用於觸發actions中的函數。使用dispatch可以實現非同步操作，而在actions中，我們可以使用非同步操作從伺服器端獲取數據並存儲在Vuex的store中。dispatch函數接收兩個參數：actions的名稱和參數對象。

store.dispatch('actionName', {
  key1: value1,
  key2: value2
})

二、dispatch函數的用途

dispatch函數通常在一個組件的methods中被調用，用於傳遞參數並觸發actions中的函數。actions可以執行非同步操作，而mutations只能執行同步操作。

//example.vue

methods: {
  handleClick() {
    this.$store.dispatch('actionName', {
      key1: value1,
      key2: value2
    })
  }
}

在上述代碼中，actions中的actionName函數會被觸發，並且接收一個參數對象。在actions中，我們可以使用該參數對象執行非同步操作，並在操作完成後使用mutations更新store中的state。

三、dispatch函數的實踐應用

1. 獲取伺服器端數據並存儲在store中

我們可以在actions中定義一個獲取數據的函數，並在其中使用dispatch和axios發送一個Get請求。在請求成功時，我們可以使用commit函數來調用mutations中的函數來更新store中的state。

//store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    data: []
  },
  mutations: {
    setData(state, data) {
      state.data = data
    }
  },
  actions: {
    async getData({ commit }) {
      const response = await axios.get('https://example.com/data')
      commit('setData', response.data)
    }
  }
})

在上述代碼中，我們首先定義了一個名為getData的action。在該action中，我們使用axios發送一個Get請求，並且使用commit函數來調用mutations中的setData函數來更新store中的state。

2. 使用Promise完成非同步操作

在actions中，我們可以頁面上執行非同步tasks，然後將它們統一到一起。在完成所有tasks之後，我們可以通過actions返回一個Promise，並且在代碼中使用該Promise執行操作。

//store.js

actions: {
  async completeTasks({ dispatch }) {
    const task1 = await dispatch('task1', payload1)
    const task2 = await dispatch('task2', payload2)
    const task3 = await dispatch('task3', payload3)

    return Promise.all([task1, task2, task3])
  },

  async task1({ dispatch }, payload) {
    return dispatch('subtask1', payload)
  },

  async task2({ dispatch }, payload) {
    return Promise.all([dispatch('subtask2', payload), dispatch('subtask3', payload)])
  },

  async task3({ dispatch }, payload) {
    return dispatch('subtask4', payload)
  },

  async subtask1({ commit }, payload) {
    const response = await axios.get('https://example.com/data')
    commit('setData', response.data)
    return response
  },

  async subtask2({ commit }, payload) {
    const response = await axios.post('https://example.com/data', payload)
    commit('setData', response.data)
    return response
  },

  async subtask3({ commit }, payload) {
    const response = await axios.patch('https://example.com/data', payload)
    commit('setData', response.data)
    return response
  },

  async subtask4({ commit }, payload) {
    const response = await axios.delete('https://example.com/data', payload)
    commit('setData', response.data)
    return response
  }
},

在上述代碼中，我們定義了多個連接到伺服器的tasks（task1、task2、task3等），並且定義了對應的subtasks（subtask1、subtask2、subtask3、subtask4等）。

在完成tasks之後，我們使用Promise.all()來返回一個Promise，該Promise將在所有tasks和subtasks執行完成後被解析。

3. 整合多個子actions

在actions中，我們可以定義多個子actions，並且將它們整合為一個actions的對象。使用dispatch函數，我們可以執行多個子actions，在所有子actions執行完成後，我們可以使用Promise.all()來將它們的結果整合為一個結果。

//store.js

actions: {
  async parentAction({ dispatch }) {
    const [action1, action2, action3] = await Promise.all([
      dispatch('childAction1', payload1),
      dispatch('childAction2', payload2),
      dispatch('childAction3', payload3)
    ])

    return { action1, action2, action3 }
  },

  async childAction1({ commit }, payload) {
    // ...
  },

  async childAction2({ commit }, payload) {
    // ...
  },

  async childAction3({ commit }, payload) {
    // ...
  }
}

在上述代碼中，我們定義了多個子actions（childAction1、childAction2、childAction3等）並且整合它們為一個parentAction。在parentAction中，使用Promise.all()將多個子actions的執行結果作為一個數組返回。

總結

dispatch函數是Vuex中非常重要的一個函數，它可以用於觸發actions中的函數，從而更新store中的state。使用dispatch函數，我們可以實現非同步操作，獲取伺服器端數據，並且整合多個actions。

Vuex的強大和有用的功能不僅限於dispatch，還有很多其他的api和功能。通過閱讀Vue.js和Vuex的文檔，我們可以更好地了解這些api和功能，並且應用到我們的實踐中。