实训状态综合运用

购物车

主题切换/换肤

汉堡菜单

掌握表单元素的基本使用

掌握数据双向绑定的运用

掌握侦听器 Watch 的基本使用

掌握状态管理|仓库 Pinia 的基本使用

掌握开发者工具 Vue Devtools 的基本使用

进一步熟悉路由的基本使用

购物车

.视图端：在购物车中，操作商品 - 全选、增加和减少，完成结算

.逻辑端：根据商品列表 lists 和选中商品列表 selectedLists 的变化，完成各种逻辑

.商品数据仓库的管理和使用

.购物车数据仓库的管理和使用

.侦听全选

.侦听部分选择

主题切换/换肤

汉堡菜单

改造实操 - 绑定综合运用 - 产品列表页或新建项目

. 增加路由 Router

. 增加状态管理 Pinia

在仓库目录 stores 创建购物车仓库 cart.js

. 定义并暴露属性：购物车 cart

. 定义并暴露方法：添加到购物车 addToCart()；根据商品 id 判断是追加还是新加

. 定义并暴露方法：加载仓库方法 fetchCart()

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', () => {

  const isLoading = ref(false)
  const cart = ref([])

  const addToCart = (product) => {
    const existingItem = cart.value.find(item => item.id === product.id)
    if (existingItem) {
      existingItem.quantity++
    } else {
      cart.value.push({ ...product, quantity: 1 })
    }
  }

  const fetchCart = async () => {
    isLoading.value = true
    let response = await fetch('https://glpla.github.io/utils/data/cart.json')
    let data = await response.json()
    cart.value = data
    isLoading.value = false
  }

  return { cart, addToCart, fetchCart }
})

商品页 - 引入并使用购物车仓库

import { useCartStore } from '@/stores/cart';
const cartStore = useCartStore()

商品页 - 初始化购物车仓库

onMounted(() => {
  cartStore.fetchCart()
})

商品页 - 为添加到购物车按钮绑定事件 addCart() 并声明对应的事件处理函数

const addCart = (item) => {
  cartStore.addToCart(item)
}

购物车页 - 引入并使用购物车仓库

import { useCartStore } from '@/stores/cart';
const cartStore = useCartStore()

购物车页 - 从仓库获取购物车数据，使用计算属性获取仓库购物车的数据并渲染；如果直接跳转到购物车页，则调用仓库方法获取远程数据

onMounted(() => {
  if (cartStore.cart.length > 0) {
    cartData.lists = computed(() => cartStore.cart)
  } else {
    cartStore.fetchCart()
  }
})

商品数量增加的同时，库存减少

增加排序：价格、库存等字段的升序、降序

实现立即下单和找人代付

使用模态框给出操作提示

使用状态管理改写路由综合运用中的汉堡菜单

使用仓库管理购物车数据的请求和渲染

现场验收、课后提交实验报告

使用浏览器访问静态资源，如图片、视频、音频等

在开发环境中获取数据，如 JSON 数据