vue中的action是指Vuex中的actions,在Vuex中,action是專門用來處理異步操作的,可以把異步操作提交給mutations進(jìn)行同步操作。在使用action時,我們有時需要給action傳遞一些參數(shù),這時就需要使用Vuex中提供的一些方法來傳遞參數(shù)了。
const actions = { getDataByParams({commit}, params) { return new Promise((resolve, reject) =>{ axios.get('api/data', { params: { ...params } }).then(res =>{ commit('getData', res.data) resolve(res.data) }).catch(err =>{ reject(err) }) }) } }
在上面的代碼中,我們可以看到,在action的方法中定義了兩個參數(shù),分別是commit和params。其中,commit是一個函數(shù),用于提交mutation并觸發(fā)狀態(tài)變更,params是我們需要傳遞給action的參數(shù)。在這里,我們使用了ES6的解構(gòu)語法,可以很方便地獲取commit方法。
this.$store.dispatch('getDataByParams', {name: 'John', age: 18}).then(() =>{ console.log('獲取成功') }).catch(() =>{ console.log('獲取失敗') })
在調(diào)用action的時候,我們需要使用Vuex提供的輔助函數(shù)dispatch來觸發(fā)action,同時也需要給action傳遞我們需要的參數(shù)。如上代碼所示,我們成功地向action傳遞了參數(shù){name: 'John', age: 18}。
有時候,我們也可以在組件中直接使用mapActions來調(diào)用action,并且指定要傳遞的參數(shù)。
import {mapActions} from 'vuex' methods: { ...mapActions([ 'getDataByParams' ]), getData() { this.getDataByParams({name: 'John', age: 18}).then(() =>{ console.log('獲取成功') }).catch(() =>{ console.log('獲取失敗') }) } }
以上代碼中,我們在組件中使用了mapActions將action映射到該組件的methods中,然后在methods中調(diào)用getDataByParams并傳遞參數(shù){name: 'John', age: 18}即可。
總的來說,Vuex中的action是用來處理異步操作的,而當(dāng)我們需要給action傳遞一些參數(shù)時,可以使用Vuex提供的方法來傳遞參數(shù),比如通過參數(shù)對象的形式或者使用mapActions。通過這些方法,我們可以很方便地在項(xiàng)目中使用action來實(shí)現(xiàn)異步操作。