Vuex有效负载未定义

Question

我正在尝试将数据库中的所有发票以及客户信息一起加载，但是当我的应用加载时，我得到了chrome vue扩展名中未定义的有效负载。我的目标是在发票表格中显示客户名称而不是客户ID 。我已经宣布发票和客户之间的关系。

这是我的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'];
  }

}

当我通过fetchInvoice操作进行console.log（响应）时

Answer 1

执行console.log（response）之后，我遍历了对象层次结构并意识到我必须附加.data

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