Pinia Stores 使用示例

Name: Desoma
Address: Shenzhen, Guangdong, 518000, CN
Telephone: +86-755-1234-5678
Price range: $$

1. Checkout Store (订单状态管理)

当前订单状态

{
  "sessionId": null,
  "orderItems": [],
  "shippingData": null,
  "isSubmitted": false,
  "currentStep": "shipping"
}

代码示例：

import { useCheckoutStore } from '~/stores/checkout'

const checkoutStore = useCheckoutStore()

// 初始化会话
checkoutStore.initializeSession('session-123')

// 设置订单项
checkoutStore.setOrderItems([
  { id: '1', name: 'Product 1', price: 29.99, quantity: 1 }
])

// 更新配送信息
checkoutStore.updateShippingData({
  firstName: 'John',
  lastName: 'Doe',
  email: 'john@example.com',
  address: '123 Main St',
  city: 'New York',
  country: 'US'
})

// 提交订单
checkoutStore.markAsSubmitted()

// 重置
checkoutStore.resetCheckout()

2. Cart Store (购物车管理)

购物车状态

商品数量: 0

总金额: $0.00

是否为空: 是

加载中: 否

代码示例：

import { useCartStore } from '~/stores/cart'
import { storeToRefs } from 'pinia'

const cartStore = useCartStore()
const { items, itemCount, totalAmount, loading } = storeToRefs(cartStore)

// 获取购物车
await cartStore.fetchCart()

// 添加商品
await cartStore.addToCart({
  product_code: 'PROD-001',
  sku_code: 'SKU-001',
  quantity: 1,
  price: 29.99
})

// 更新数量
await cartStore.updateQuantity({
  cart_id: 1,
  item_id: 123,
  quantity: 2
})

// 移除商品
await cartStore.removeItem(123)

// 清空购物车
await cartStore.clearCart()

3. 响应式更新示例

实时监听状态变化

订单是否有效: 否

订单总额: $0.00

当前步骤: shipping

代码示例：

import { useCheckoutStore } from '~/stores/checkout'
import { storeToRefs } from 'pinia'
import { watch } from 'vue'

const checkoutStore = useCheckoutStore()
const { isCheckoutValid, orderTotal, currentStep } = storeToRefs(checkoutStore)

// 监听状态变化
watch(orderTotal, (newTotal) => {
  logger.warn('订单总额变化:', newTotal)
})

watch(currentStep, (newStep) => {
  logger.warn('当前步骤:', newStep)
})