Vue中购物车初始化应选beforeMount还是mounted？加载异常求解

核心问题说明 #

你遇到的Spinner一直加载的问题，和将初始化逻辑放在beforeMount还是mounted生命周期完全无关：

• initializeCart是异步接口请求，beforeMount和mounted的触发间隔只有几毫秒，远小于接口请求耗时，移动调用位置不会有任何效果
• 你当前的根本问题是Vuex状态中没有对应控制字段的定义和赋值，导致isCartInitialized永远为假

修复步骤 #

1. 先在Vuex的state中补充isCartInitialized字段，初始值设为false

state: {
 uuid: null,
 items: [],
 sections: [],
 phone: null,
 isSending: false,
 coupon: null,
 lastAddedProduct: false,
 isNotificationActive: false,
 // 新增控制字段
 isCartInitialized: false
},

2. 修改initCart对应的mutation，购物车数据初始化完成后将状态标记为true

mutations: {
  initCart(state, payload) {
    state.uuid = payload.uuid
    state.items = payload.items
    state.sections = payload.sections
    state.coupon = payload.coupon
    // 标记初始化完成
    state.isCartInitialized = true
  }
}

3. 确认组件中的isCartInitialized是正确映射的Vuex状态，示例：

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['isCartInitialized'])
  },
  beforeMount() {
    if (!this.isCartInitialized) {
      this.initializeCart();
    }
  }
}

额外注意事项 #

你当前模板代码存在变量名冲突问题：

<div v-for='(item, index) in item.warehouse_positions' :key='index'>

循环源item.warehouse_positions的item没有被定义，且和循环得到的item重名，会导致渲染报错，需要修正为正确的数据源，比如你存在Vuex中的items数组，遍历每个元素下的仓位列表。

生命周期选择说明 #

如果是纯接口请求类的初始化逻辑，放在beforeMount和mounted都可以，两者没有本质差异。如果初始化逻辑需要操作DOM，才需要放在mounted中执行。

内容的提问来源于stack exchange，提问作者Alex