Pinia Getter无响应：如何实现购物车数量Getter的响应式？

你的代码存在两个核心问题导致Getter无响应式：

1. 异步遍历的错误处理 #

forEach 无法正确等待内部异步请求完成，await cart_cookie.items.forEach(...) 不会等待所有产品接口请求返回，就直接执行了 this.cart = c。此时 c.items 是空数组，后续请求返回后修改 c.items 也不会触发Pinia的响应式更新——因为 c 不是Pinia管理的响应式对象。

2. 响应式赋值时机错误 #

由于异步请求未被正确等待，this.cart 被提前赋值为空数组的对象，后续产品数据回来后再修改该对象的属性，无法触发Pinia的响应式检测（Pinia的响应式依赖于对state属性的直接赋值或使用响应式API修改）。

修复后的Pinia Store代码 #

export const useCartStore = defineStore('cartStore', {
  state: () => ({
    cart: null,
    url: "cart/"
  }),

  actions: {
    async list() {
      const cart_cookie = cookie().get_cookie("cart")
      const c: { items: CartItem[] } = { items: [] }
      
      if (cart_cookie) {
        // 用map生成所有异步请求的Promise数组，再用Promise.all等待全部完成
        const itemPromises = cart_cookie.items.map(async (item: CartItem) => {
          const product = await gateway().get(`products/${item.product}/`)
          return { product, quantity: item.quantity }
        })
        // 等待所有产品请求完成，得到完整的items数组
        c.items = await Promise.all(itemPromises)
        // 直接赋值给state的cart，触发响应式更新
        this.cart = c
      } else {
        // 没有购物车cookie时，重置cart为null，避免遗留旧值
        this.cart = null
      }
    },
  },

  getters: {
    quantity(state) {
      return state.cart?.items.reduce((sum, item) => sum + item.quantity, 0) || 0
    }
  }
})

组件中的正确使用（Options API） #

<script lang="ts">
import { useCartStore } from '@/stores/cart'

export default {
  data() {
    return {
      cart_store: useCartStore()
    }
  },
  async mounted() {
    // 在组件挂载后调用list方法，确保异步请求完成后更新state
    await this.cart_store.list()
  }
}
</script>

<template>
  {{ cart_store.quantity }}
</template>

额外说明 #

如果你使用Vue3的Composition API，更推荐在setup中使用Store：

<script setup lang="ts">
import { useCartStore } from '@/stores/cart'
const cart_store = useCartStore()

// 组件挂载时加载购物车数据
await cart_store.list()
</script>

<template>
  {{ cart_store.quantity }}
</template>

内容的提问来源于stack exchange，提问作者H.M