如何在Vue结账组件中正确获取Vuex Store存储的cart数组内的商品详情

核心问题 #

你当前的Vuex中cart本身是存储多个购物车商品的数组，直接用map遍历会得到对应字段的数组，forEach没有返回值自然得到undefined，同时你在data初始化阶段直接读取Vuex状态，会存在数据不同步的问题，后续购物车更新后data里的对应值不会自动更新。

解决方案 #

根据业务场景选择对应方案：

方案1：购物车支持多商品（推荐） #

不要把商品字段拆成单个值存入customers，提交时单独传递商品数组，适配订单-多商品的数据库存储逻辑。
修改后组件代码如下：

export default {
  data() {
    return {
      // customers仅存储用户个人信息
      customers: {
        name:'',
        adress:'',
        town:'',
        email:'',
        phone:''
      }
    }
  },
  methods: {
    async handleSubmitForm() {
      try {
        // 提交时实时读取Vuex最新的购物车数据，保证数据同步
        const cart = this.$store.state.cart
        // 组装提交参数
        const submitData = {
          ...this.customers,
          // 直接传递完整购物车数组，后端存储时做订单和商品的关联即可
          cartList: cart
        }
        await axios.post('http://localhost:3000/api/orders/customers', submitData)
        this.$router.push('/customers')
        // 清空表单
        this.customers = {
          name:'',
          adress:'',
          town:'',
          email:'',
          phone:''
        }
        // 原代码缺少this.$，修正路由跳转
        this.$router.go(-1)
      } catch (error) {
        console.log(error)
      }
    }
  }
}

方案2：购物车仅允许单个商品 #

如果业务逻辑限定每次只能提交一个商品，直接读取数组第一个元素的对应字段即可：

// 提交时取单个商品值
const submitData = {
  ...this.customers,
  title: cart[0]?.ropeTitle || '',
  diameter: cart[0]?.ropeDiameter || '',
  price: cart[0]?.ropePrice || '',
  cartQuantity: cart[0]?.ropeQuantity || ''
}

注意事项 #

• 不要在data初始化阶段读取Vuex的动态状态，data仅会在组件实例创建时执行一次，后续Vuex状态更新不会同步到data中，需在提交时实时读取或使用计算属性监听。
• 取值时添加可选链?.可以避免购物车为空时读取属性报错。
• 原代码中router.go(-1)缺少this.$前缀，会抛出变量未定义的错误。

内容的提问来源于stack exchange，提问作者Josip Marić