如何在onSSR加载服务端配送数据后更新input表单绑定数据

架构老林

2026-9-30

问题原因&解决方法

核心问题点

响应式对象操作错误：你通过ref()定义的form是被包裹的响应式代理对象，修改其内部属性必须访问.value，原代码直接修改form.firstName属于操作代理对象本身，不会作用到绑定表单的实际值上。
取值判断逻辑错误：shipping同样是useShipping()返回的ref对象，判断shipping !== undefined永远为真，应该判断shipping.value是否有有效值，避免空值报错。
字段同步不完整：原代码仅赋值了firstName单个字段，其余表单字段未同步配送数据。

修正后的代码

将onSSR钩子内的逻辑修改如下：

onSSR(async () => {
  await load();
  await loadCountries();
  // 仅当shipping有返回值时执行赋值
  if (shipping.value) {
    // 所有修改都要访问form.value操作实际的响应式值
    form.value.firstName = shipping.value.firstName;
    form.value.lastName = shipping.value.lastName;
    form.value.addressLine1 = shipping.value.streetName;
    form.value.addressLine2 = shipping.value.apartment;
    form.value.city = shipping.value.city;
    form.value.state = shipping.value.state;
    form.value.country = shipping.value.country;
    form.value.postalCode = shipping.value.postalCode;
    form.value.phone = shipping.value.phone;
    // 已登录用户可补充同步邮箱
    if (isAuthenticated.value) {
      form.value.email = shipping.value.email;
    }
  }
});