Vue3+Pinia+Laravel：对象数组存入Store时丢失最后一个元素

问题场景 #

我使用Vue.js/Quasar + Pinia开发单页应用，后端基于Laravel 10。应用启动时通过axios拉取api/everything接口数据，其中periods字段在网络请求中返回完整，但赋值给Pinia的periodStore.periods后，数组最后一个元素丢失。控制台打印everything.data["periods"]时，视觉上显示有3个元素，但数组长度为2；通过CRUD表单更新period时也出现同样问题。

前端核心代码 #

let everything = null;
async function fetchEverything() {
  let res = await authStore.fetchUser();
  if (res === "success" && authStore.authUser !== null) {
    everything = await axios.get("api/everything");
    
    // 存在问题的代码段
    console.log(everything.data["periods"]);
    periodStore.periods = everything.data["periods"];
    // 问题代码段结束
    
    eventStore.events = everything.data["events"];
    activityStore.activities = everything.data["activities"];
    bankStore.banks = everything.data["banks"];
    personStore.persons = everything.data["persons"];
    participationStore.participations = everything.data["participations"];
    cassetteOperationStore.cassetteOperations = everything.data["cassetteOperations"];
    bankOperationStore.bankOperations = everything.data["bankOperations"];
    console.log("initially logged");
  } else {
    console.log("initially not logged");
  }
}

fetchEverything();

后端Laravel API代码 #

public function index(){
    $result=[];
    $period=Period::where('current',1)->get();
    $start=$period[0]->start;
    $end=$period[0]->end;

    $periods=PeriodResource::collection(Period::all());
    $persons=PersonResource::collection(Person::all());
    $banks=BankResource::collection(Bank::all());
    $events=EventResource::collection(Event::where('date','>=',$start)->where('date','<=',$end)->get());
    $activities=ActivityResource::collection(Activity::all());
    $participations=ParticipationResource::collection(Participation::all());
    $cassetteOperations=CassetteOperationResource::collection(CassetteOperation::where('date','>=',$start)->where('date','<=',$end)->get());
    $bankOperations=BankOperationResource::collection(BankOperation::where('date','>=',$start)->where('date','<=',$end)->get());

    $result['periods']=$periods;
    $result['persons']=$persons;
    $result['banks']=$banks;
    $result['events']=$events;
    $result['activities']=$activities;
    $result['participations']=$participations;
    $result['cassetteOperations']=$cassetteOperations;
    $result['bankOperations']=$bankOperations;

    return $result;
}

问题原因分析 #

1. Laravel Resource序列化嵌套问题：Resource::collection()返回的是JsonResource实例，序列化后会生成包含data子字段的结构（如{"periods": {"data": [{}, {}, {}]}}），前端直接赋值外层对象时，会误把非数组结构当成数组处理，导致长度计算错误。
2. Pinia Store的意外处理：若periodStore中对periods的赋值有自定义逻辑（如错误的数组截取、过滤），可能会移除最后一个元素。
3. 控制台打印的引用误导：控制台打印的是对象引用，实际赋值时数据可能未完全序列化，导致显示与真实值不符。

解决方案 #

方案1：修正前端赋值逻辑 #

直接取Resource返回的data子字段作为数组赋值：

// 原代码
periodStore.periods = everything.data["periods"];
// 修改为
periodStore.periods = everything.data["periods"].data;

方案2：后端转换为纯数组返回 #

在Laravel中调用resolve()方法，将Resource collection转换为纯数组后返回，避免前端处理嵌套结构：

// 原代码
$result['periods']=$periods;
// 修改为
$result['periods']=$periods->resolve();

同理，其他Resource collection字段也可按此方式处理。

方案3：检查Pinia Store定义 #

确认periodStore中是否存在错误的数组操作逻辑，例如：

// 错误示例：意外截取了最后一个元素
state: () => ({
  periods: []
}),
actions: {
  setPeriods(periods) {
    this.periods = periods.slice(0, -1);
  }
}

若存在此类逻辑，直接改为纯赋值即可：this.periods = periods。

验证步骤 #

1. 用JSON.stringify()打印真实序列化数据：console.log(JSON.stringify(everything.data["periods"]))，确认结构是否符合预期。
2. 查看浏览器网络面板的响应内容，确认periods字段的层级结构。
3. 测试修改后的赋值逻辑，检查Pinia状态中数组元素是否完整。

内容的提问来源于stack exchange，提问作者Meaulnes