полезная нагрузка vuex не определена

Question

Я пытаюсь загрузить все счета-фактуры в базу данных вместе с информацией о клиентах, но когда мое приложение загружается, я получаю полезную нагрузку, неопределенную в расширении chrome vue. Моя цель - отобразить имя клиента вместо идентификатор клиента в таблице счетов. я уже объявил об отношениях между счетом и клиентом.

это код в моем InvoiceController

  public function loadInvoice()
{

    $results = Invoice::with(['customer'])
        ->orderBy('created_at', 'desc')
        ->paginate(15);

    return response()
        ->json(['results' => $results]);   
}

Это моя функция vuex для извлечения всех счетов из базы данных

    const actions = {
      async fetchInvoices({commit}) {
      let response = await Api().get('/invoices/loadInvoice');    
      console.log(response);         
      commit('SET_INVOICE',response.data.invoices)
   },

Это мой установщик и получатель

   const mutations = {
     SET_INVOICE(state,invoices) {
     state.invoices = invoices
    }
  }

Это моя модель клиента

  class Customer extends Model
  {
   protected $table = 'customers';

   protected $fillable = ['firstname','lastname','phone','shop_name','shop_addresss'];

   protected $appends = ['text'];

  public function getTextAttribute()
  {
    return $this->attributes['firstname']. ' - '.$this->attributes['lastname'];
  }

} ​​

когда я console.log (ответ) от моего действия fetchInvoice

Answer 1

После выполнения console.log (ответ) я прошел иерархию объектов и понял, что должен добавить .data

  async fetchInvoices({commit}) {
    let response = await Api().get('/invoices/loadInvoice');    
    console.log(response);         
    commit('SET_INVOICE',response.data.invoices.data)
},