this.$store.dispatch的全面解析

一、基礎概念

1、this.$store.dispatch是VueX框架中用來觸發actions的方法

2、actions是一個用於提交mutations的方法的對象集合，它可以包含任意非同步操作

3、mutations是一個用於改變state狀態的方法的對象集合，它只能包含同步操作

4、state是一個用來存儲數據狀態的集合

5、使用dispatch方法需要在Vue組件中先引入VueX的store文件

import store from './store'

export default {
   mounted() {
      console.log(this.$store) //undefined
      console.log(store) // store對象
   }
}

二、dispatch方法的使用

1、基礎用法：通過store.dispatch方法傳入actions名稱來觸發actions中的方法

export default {
   methods: {
      async fetchData() {
         const data = await this.$store.dispatch('fetchDataAction')
         console.log(data)
      }
   }
}

2、傳參用法：如果actions中定義了參數，可以在store.dispatch()中傳入參數

store.dispatch('fetchDataAction', params)

3、Promise用法：store.dispatch()返回一個promise對象，可以通過.then()訪問actions中直接返回的數據

store.dispatch('fetchDataAction').then(data => {
    console.log(data)
})

4、async/await用法：可以直接使用async/await語法獲取非同步操作返回的結果

async function() {
   const data = await store.dispatch('fetchDataAction')
   console.log(data)
}

三、dispatch方法的參數

1、第一個參數：actions名稱，必填項

2、第二個參數：actions操作的參數，可選項

3、第三個參數：具有多個觸發mutations的actions執行器數據，必須為對象格式，可選項

4、第四個參數：觸發成功時的回調函數，可選項

5、第五個參數：觸發失敗時的回調函數，可選項

store.dispatch('actionName', {
   parameter1: value1,
   parameter2: value2
}, {
   root: true,
   test: () => console.log('test')
}, 
() => {
   console.log('success')
},
() => {
   console.log('fail')
})

四、常見應用場景

1、非同步請求數據到組件中渲染頁面

// action.js
export const fetchDataAction = async ({ commit }) => {
  const data = await api.fetchData()
  commit('setFetchedData', data)
  
  return data
}
// mutation.js
export default {
  setFetchedData (state, data) {
    state.data = data
  }
}
// component.vue
async created () {
  await this.$store.dispatch('fetchDataAction')
  console.log(this.$store.state.data)
}

2、調用其他mutation來執行多個非同步操作

// action.js
export const fetchDataAction = async ({ commit }) => {
   const data = await api.fetchData()
   commit('setData', data)
   return data
}
export const filterDataAction = async ({ commit }, filterValue) => {
   const filteredData = await api.filterData(filterValue)
   commit('setFilteredData', filteredData)
}
export const fetchAndFilterDataAction = async dispatch => {
   await dispatch('fetchDataAction')
   await dispatch('filterDataAction', 'filter')
}
// mutation.js
export default {
   setData (state, data) {
      state.data = data
   },
   setFilteredData (state, filteredData) {
      state.filteredData = filteredData
   }
}
// component.vue
async created () {
  await this.$store.dispatch('fetchAndFilterDataAction')
  console.log(this.$store.state.data)
  console.log(this.$store.state.filteredData)
}

3、使用commit方法提交多個mutation

// action.js
export const fetchDataAction = async ({ commit }) => {
   const data = await api.fetchData()
   commit('setData1', data)
   commit({
      type: 'setData2',
      data: 'data2'
   })
}
// mutation.js
export default {
   setData1 (state, data) {
      state.data1 = data
   },
   setData2 (state, data) {
      state.data2 = data
   }
}
// component.vue
async created () {
  await this.$store.dispatch('fetchDataAction')
  console.log(this.$store.state.data1)
  console.log(this.$store.state.data2)
}

五、總結

通過以上的介紹，我們可以了解到this.$store.dispatch是用來觸發actions的方法，具有傳參、Promise、async/await用法，支持多個觸發mutations的actions執行器數據和成功、失敗回調函數。同時我們也能看到this.$store.dispatch廣泛用於非同步請求數據到組件中渲染頁面、調用其他mutation來執行多個非同步操作、使用commit方法提交多個mutation等方面，是VueX框架中非常重要的一個方法。