如何轻松修复 Pinia 对象在 Vue 循环中失去响应式？

vue.js

2024-03-22 02:03:52

## 修复 Pinia 对象在 Vue 循环中失去响应式

在 Vue.js 中，使用 Pinia 状态管理库时，经常会遇到在 v-for 循环中使用 Pinia 对象时响应式丢失的问题。本文将深入探讨这个问题，并提供详细的解决方案，帮助开发人员轻松修复它。

为什么会出现响应式丢失？

当在 v-for 循环中使用 Pinia 对象时，Vue 会创建一个新的对象作为循环中的每个项目。此新对象与原始 Pinia 状态没有响应式连接，导致更改循环中对象属性时不会反映到原始状态中。

解决方案：使用 `reactive()` 函数

为了解决这个问题，我们可以使用 Vue 的 reactive() 函数将 Pinia 对象包装在一个响应式代理中。这将确保循环中的每个项目都与原始状态保持响应式连接。

要做到这一点，请使用 reactive() 函数包装在 v-for 循环中使用的 Pinia 对象，如下所示：

<template>
  <ul>
    <li v-for="item in reactive(piniaStore.items)">
      {{ item.name }}
    </li>
  </ul>
</template>

其他注意事项

使用 reactive() 函数时，需要注意以下几点：

只需在循环中使用时包装一次 Pinia 对象。
对于嵌套的 Pinia 对象，需要使用 reactive() 函数包装每个对象。
reactive() 函数不会递归地包装对象，因此需要手动包装嵌套的对象。

修复后的示例

以下是修复后的 BalanceItemList.vue 组件示例：

<template>
  <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5">
    <div class="border-black border-b bg-gray-200">
      <span class="font-bold w-full">{{ category.name }}</span>
    </div>

    <div v-for="balanceItem in reactive(category.balance_items)" :key="balanceItem.id">
      {{ reactive(balanceItem).total = 500 }}  <!-- 使用 reactive() 包装 Pinia 对象 -->
      <balance-item :balance-item="reactive(balanceItem)" @update-balance-item="update"/>
    </div>
    <div>
      <balance-item-create :category="category.id" @create-balance-item="update"/>
    </div>
    <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2">
      <div :class="category.is_positive ? '': 'text-red-600' "
           class="col-start-4 border-t-2 border-black font-bold">
        &euro;{{ categoryItemsStore.totals[category.id].total }}
      </div>
    </div>
  </div>

</template>