我的购物车项目是不显示在这车（这是在状态使用pinia）后添加他们使用一个动作从一个按钮在这商店页
我的代码：
store.js（使用pinia）

import { defineStore } from "pinia";
import Products from "../db.json";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    cart: [],
  }),
  actions: {
    addToCart(id) {
      this.cart.push(id)
      console.log("test passed!")
    }
  }
});

shop.vue

<template>
  <div class="shop">
    <h1>shop</h1>
    <div class="products" v-for="item in Products" :key="item.id">
      {{ item.name }} {{ item.price }}$
      <button @click="storeCounter.addToCart(item.id)">Add to Cart</button>
    </div>
  </div>
</template>
<script setup>
import { useCounterStore } from '../stores/counter';
import Products from "../db.json"

const storeCounter = useCounterStore()

</script>

cart.vue

<template>
    <div class="cart">
        <h1>cart</h1>
        <div class="cartitems" v-for="item in storeCounter.cart" :key="item.id">{{ item.name }} {{ item.price }}</div>
    </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter';
import Products from "../db.json"

const storeCounter = useCounterStore()

</script>

为什么对我不起作用？我想我做的每件事都对...