vuex Action中调用接口修改数据异步问题

1,575 阅读1分钟

例子: 返回promise对象,并将参数返回,在调用actions中的_getList时,可以使用 async await 来处理异步

actions: {
    _getList(context, options) {
        return axios.get('/page/list', {params: {
            ...options
        }}).then(res => {
            if (res.code === 'ok') {
                return promise.resolve(res)
            }
        })
    }
}
// 引入vuex
import {mapAction} from 'vuex'
export default {
    data() {
        return {
            list: [] // 页面展示数据
        }   
    },
    methods: {
    
        // 引入action
        ...mapAction('namespace', ['_getList']),
        
        async test() {  // 使用async 和 await 处理异步问题
            let param = {
                pageNum: 1,
                pageSize: 10
            }
            let data = await this._getList(param);
            this.list = data.list;
        }
    }
}