vuex 有效载荷未定义答案

【问题标题】：vuex payload is undefinedvuex 有效载荷未定义
【发布时间】：2020-06-08 11:36:08
【问题描述】：

我正在尝试将数据库中的所有发票连同客户信息一起加载，但是当我的应用程序加载时，我在 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)
   },

这是我的 setter 和 getter

   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(response) 时

【问题讨论】：

看起来loadInvoice() 返回一个带有results 键的json 对象，但您的fetchInvoices 函数需要invoices 键？不应该是response.data.results吗？
@EricGuan 我有对象数组，但我仍然得到未定义的有效负载
你在console.log(response)时看到了什么？
@Terry 一个对象->数据->那个其他的发票。我在上面为 console.log(response) 发布了一张图片

标签： vue.js vuex

【解决方案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)
},

【讨论】：