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框架中非常重要的一个方法。