pinia-cart.vue

<script setup lang="ts">
import { ref } from '#imports'
import { useCartStore } from '~~/stores/cart'

const cart = useCartStore()

const itemName = ref('')

function addItemToCart() {
  if (!itemName.value) return
  cart.addItem(itemName.value)
  itemName.value = ''
}

function throwError() {
  throw new Error('This is an error')
}

function clearCart() {
  if (window.confirm('Are you sure you want to clear the cart?')) {
    cart.rawItems = []
  }
}
</script>

<template>
  <Layout>
    <div>
      <div style="margin: 1rem 0;">
        <PiniaLogo />
      </div>

      <form @submit.prevent="addItemToCart" data-testid="add-items">
        <input id="item-input" type="text" v-model="itemName" />
        <button id="item-add">Add</button>
        <button id="throw-error" @click="throwError">Throw error</button>
      </form>

      <form>
        <ul data-testid="items">
          <li v-for="item in cart.items" :key="item.name">
            {{ item.name }} ({{ item.amount }})
            <button
              @click="cart.removeItem(item.name)"
              type="button"
            >X</button>
          </li>
        </ul>

        <button
          :disabled="!cart.items.length"
          @click="clearCart"
          type="button"
          data-testid="clear"
        >Clear the cart</button>
      </form>
    </div>
  </Layout>
</template>



<style scoped>
img {
  width: 200px;
}

button,
input {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
</style>