Vue3 Composition API：动态V-model路由切换后视图不更新问题

安全阿岳

2026-8-18

问题原因与解决办法

问题原因

Vue的响应式系统默认不会追踪对象动态新增的属性，Pinia基于Vue响应式机制，因此直接通过this.inventory[property] = {...}添加属性时，新属性无法被响应式追踪，导致路由切换后视图无法感知数据变化。而预定义属性时，初始化阶段就被响应式系统追踪，所以能正常更新视图。

解决办法

方法1：更新时替换整个inventory对象（推荐）

在Pinia store的getPetInventory或其他动态添加属性的方法中，不要直接给inventory新增属性，而是通过扩展运算符创建新对象，触发响应式更新：

// airlineStore中的getPetInventory示例
async getPetInventory(airlineId, transportType) {
  const data = await api.fetchPetInventory(airlineId, transportType);
  // 用扩展运算符生成新对象，触发响应式检测
  this.inventory = {
    ...this.inventory,
    [transportType]: data
  };
}

这种方式让Vue检测到inventory对象的引用变化，从而触发视图更新。

方法2：确保子属性为响应式对象（可选）

如果需要单独维护每个子属性的响应式，可以将子属性初始化为reactive对象，同时仍需触发inventory的引用更新：

// airlineStore中的state与action示例
state: () => ({
  inventory: {}
}),
actions: {
  async getPetInventory(airlineId, transportType) {
    const data = await api.fetchPetInventory(airlineId, transportType);
    // 将子属性转为响应式对象
    if (!this.inventory[transportType]) {
      this.inventory[transportType] = reactive(data);
    } else {
      Object.assign(this.inventory[transportType], data);
    }
    // 强制触发inventory的响应式更新
    this.inventory = { ...this.inventory };
  }
}