Vuex Action - Возвращение обещания Аксиоса

Question

У меня возникли трудности с использованием обещания, возвращенного axios в двух местах.Я хочу использовать .then() внутри своего действия Vuex, чтобы зафиксировать изменение в моем состоянии, вернуть обещание axios и снова использовать .then() внутри моего компонента для обновления пользовательского интерфейса.Проблема, с которой я столкнулся, заключается в том, что ответ на обещание не определен внутри моего компонента.

// component
methods: {
  getUser(userId) {
    this.$store.dispatch('GET_USER', userId)
      .then(response => {
        console.log(response); // undefined
      });
  }
}

// vuex
actions: {
  GET_USER: ({commit}, userId) => {
    return api.getUserById(userId)
      .then(({data}) => {
        commit('ADD_USER', data);
      });
  }
}

// api service
getUserById(userId) {
  return axios.get('/api/users/' + userId);
}

Если я уберу использование .then() в своем действии Vuex, response станет объектом из моего API, но я хотел бы иметь обещание в моем компоненте, чтобы я мог catch ошибок.

// component
methods: {
  getUser(userId) {
    this.$store.dispatch('GET_USER', userId)
      .then(response => {
        console.log(response); // no longer undefined
      });
  }
}

// vuex
actions: {
  GET_USER: ({commit}, userId) => {
    return api.getUserById(userId); // removed 'then' method
  }
}

Что не так в первом блоке кода?
Спасибо.

Answer 1

Вам необходимо выполнить поиск, mapGetters, mapActions и проверить асинхронную функцию

, например

, если вы запрашиваете API, вы можете сделать это.

//api.js

import axios from 'axios'
export aync function getuser() {
  ... 
  ...
  const data = await axios.get(url,{params:{....}})
  return data
}
//component
import {getuser} from '@/app.js'
import {mapAction} from 'vuex'
  data() {
  return {
    data:null
  }
}
methods: {
..mapAction('getUserAction')
  async getUserMethod () {
    this.data = await getuser()
    this.getUserAction(this.data)
  }
}



//store.js
actions: {

getUserAction () {
  // your actions..
  }
}

Answer 2

В первом блоке ваш then ничего не возвращает: поэтому он возвращает undefined.Возвращение разрешенного значения должно решить эту проблему.