Vue.js子组件生命周期钩子选择：如何在父组件之后执行？

你遇到的核心问题其实是Vue组件生命周期的执行顺序，再加上fetchNotesAction是异步操作导致的，咱们一步步拆解：

为什么子组件拿不到数据？ #

首先要明确Vue父子组件的生命周期执行顺序：

• 父组件 beforeCreate → 父组件 created
• → 子组件 beforeCreate → 子组件 created → 子组件 mounted
• → 父组件 mounted

你是在父组件的mounted钩子中触发this.$store.dispatch('fetchNotesAction')，这时候子组件的mounted早就已经执行完了！当子组件执行console.log(this.$store.getters.getNotes)时，异步的fetchNotesAction甚至还没开始执行（或者还在等待接口响应），store里自然没有数据。

而父组件中dispatch后能拿到数据，是因为父组件的mounted在子组件之后执行，当你在父组件里紧接着dispatch打印时，可能异步请求已经完成（或者你是在dispatch的回调里打印的，比如用await或者.then()），这时候store已经被填充了。

解决方案 #

你完全不需要重新调用fetchNotesAction，只需要调整代码的执行时机或者监听数据变化：

1. 提前触发异步请求的时机 #

把fetchNotesAction的dispatch放到父组件更早的生命周期钩子，比如created或者beforeCreate：

// 父组件
created(){ 
  this.$store.dispatch('fetchNotesAction') 
},
components: { ChildComponent }

这样异步请求会更早开始，当子组件执行mounted时，大概率请求已经完成，store里有数据了。不过如果接口响应很慢，还是可能出现数据未加载完成的情况，这时候可以结合下面的方法。

2. 子组件用响应式方式获取数据 #

不要在mounted/created里一次性获取数据，而是用计算属性或者watch监听来响应数据变化：

方法一：使用计算属性（推荐）

计算属性是响应式的，当store里的数据更新时会自动同步：

// 子组件
computed: {
  notes() {
    return this.$store.getters.getNotes
  }
},
mounted(){
  // 如果需要在数据加载完成后执行逻辑，可以结合watch
  if (this.notes.length) {
    console.log(this.notes)
  }
},
watch: {
  notes(newVal) {
    // 数据更新时触发，这里可以处理后续逻辑
    console.log('数据更新了', newVal)
  }
}

方法二：直接监听getter

// 子组件
watch: {
  '$store.getters.getNotes'(newVal) {
    if (newVal && newVal.length) {
      console.log(newVal)
    }
  }
}

3. 父组件等待action完成后再渲染子组件 #

可以在父组件中监听action的完成状态，用v-if控制子组件的渲染，确保子组件渲染时store已经有数据：

// 父组件
data() {
  return {
    notesLoaded: false
  }
},
async created(){ 
  await this.$store.dispatch('fetchNotesAction')
  this.notesLoaded = true
},
components: { ChildComponent }

模板里：

<ChildComponent v-if="notesLoaded" />

这样子组件只会在数据加载完成后才挂载，mounted里就能直接拿到数据了。

总结 #

你不需要重新调用fetchNotesAction，问题的核心是生命周期顺序和异步操作的时机不匹配。选择上面任意一种方案都能解决问题，推荐优先用计算属性的方式，因为它符合Vue的响应式设计理念。

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