使用 Vue 3 和 TypeScript 的 Vite 商城购物车实现示例

// ProductList.vue
<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }}
        <button @click="addToCart(product)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store';

export default defineComponent({
  setup() {
    const store = useStore();
    const products = [
      { id: 1, name: '商品1', price: 100 },
      { id: 2, name: '商品2', price: 200 },
      // 其他商品
    ];

    const addToCart = (product: { id: number; name: string; price: number }) => {
      store.commit('addToCart', product);
    };

    return {
      products,
      addToCart,
    };
  },
});
</script>

// ShoppingCart.vue
<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        {{ item.name }} - ￥{{ item.price }}
        <button @click="removeFromCart(index)">移出购物车</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store';

export default defineComponent({
  setup() {
    const store = useStore();
    const cartItems = store.state.cart;

    const removeFromCart = (index: number) => {
      store.commit('removeFromCart', index);
    };

    return {
      cartItems,
      removeFromCart,
    };
  },
});
</script>

// store/index.ts
import { createStore, Store } from 'vuex';

interface Product {
  id: number;
  name: string;
  price: number;
}

interface State {
  cart: Product[];
}

const store = createStore<State>({
  state: {
    cart: [],
  },
  mutations: {
    addToCart(state, product: Product) {
      state.cart.push(product);
    },
    removeFromCart(state, index: number) {
      state.cart.splice(index, 1);
    },
  },
});

export function useStore(): Store<State> {
  return store as Store<State>;
}