面试题：Vue Composition API在复杂组件交互场景下的应用

Question

假设存在一个电商产品展示页面，有产品列表组件、产品详情组件、购物车组件。产品列表点击跳转到详情，详情中可添加商品到购物车。请用Vue Composition API实现这些组件间的复杂交互逻辑，包括状态共享与更新，并说明如何更好地进行代码的组织与复用，以及在这种场景下响应式原理是如何体现的。

Answer 1

1. 使用Vue Composition API实现组件交互逻辑

1.1 产品列表组件 (ProductList.vue)

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id" @click="goToDetail(product.id)">{{ product.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useProductStore } from '../stores/productStore';

const productStore = useProductStore();
const products = productStore.products;
const router = useRouter();

const goToDetail = (productId) => {
  router.push(`/product/${productId}`);
};
</script>

1.2 产品详情组件 (ProductDetail.vue)

<template>
  <div>
    <h2>{{ product.name }}</h2>
    <button @click="addToCart(product)">添加到购物车</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useProductStore } from '../stores/productStore';

const route = useRoute();
const productStore = useProductStore();
const product = productStore.getProductById(route.params.productId);

const addToCart = (product) => {
  productStore.addToCart(product);
};
</script>

1.3 购物车组件 (Cart.vue)

<template>
  <div>
    <ul>
      <li v-for="item in cartItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { useProductStore } from '../stores/productStore';

const productStore = useProductStore();
const cartItems = productStore.cartItems;
</script>

1.4 创建产品存储模块 (productStore.js)

import { defineStore } from 'pinia';

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [
      { id: 1, name: '商品1' },
      { id: 2, name: '商品2' }
    ],
    cartItems: []
  }),
  actions: {
    getProductById(productId) {
      return this.products.find(product => product.id === parseInt(productId));
    },
    addToCart(product) {
      this.cartItems.push(product);
    }
  }
});

2. 代码组织与复用

• 模块化：将数据和逻辑封装在Pinia的store中，如productStore，使得不同组件可以共享状态和行为。
• 组件化：每个功能模块封装成独立的组件，如ProductList、ProductDetail、Cart，通过props和事件进行通信。
• 逻辑复用：使用组合式函数，如在多个组件中使用useProductStore获取产品相关的状态和方法，提高代码复用性。

3. 响应式原理体现

• 数据响应式：Vue Composition API中的ref和reactive函数创建的变量是响应式的。例如productStore中的products和cartItems，当它们的值发生变化时，依赖它们的组件会自动重新渲染。
• 依赖收集：Vue会自动收集组件中对响应式数据的依赖。例如ProductList组件依赖productStore中的products，当products变化时，ProductList会重新渲染。
• 触发更新：当在ProductDetail中调用addToCart方法修改cartItems时，依赖cartItems的Cart组件会自动更新，因为cartItems是响应式数据，其变化会触发依赖它的组件的重新渲染。