vuex 페이로드가 정의되지 않음

vuex 페이로드가 정의되지 않음

나는 고객 정보와 함께 데이터베이스의 모든 송장을 로드하려고 노력하지만, 내 앱이 로드될 때 나는 크롬뷰 확장에 정의되지 않은 페이로드를 받는다. 나의 목표는 송장표에 고객 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'];
  }

}

petchInvoice 작업에서 console.log(응답)할 때

console.log(response)를 실행한 후 개체 계층을 조사하여 .data를 추가해야 함을 깨달았다.

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

참조URL: https://stackoverflow.com/questions/60382698/vuex-payload-is-undefined