vue3 中 pinia state 中的购物车中未显示的项目

Question

my cart items is not showing in the cart(which is in state using pinia) after adding them using an action from a button in the shop page

my code:

store.js(using 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>

why it is not working for me? i assume i did everything right...

Answer 1

shop.vue is only pushing the id number into the store's cart array

<button @click="storeCounter.addToCart(item.id)">

cart.vue is attempting to display the cart array as if contains full product objects and not just the ids

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

This can be easily fixed by changing shop.vue to add the full item instead of just item.id

<button @click="storeCounter.addToCart(item)">