如何在mounted或created钩子中使用其他computed属性？附代码示例

嘿，这个问题其实挺典型的，咱们来拆解一下~

首先明确一点：在created或者mounted钩子中直接访问computed属性是完全合法的，就像你代码里写的this.user.id那样。不过这里有个容易踩的坑——如果你的user是通过异步方式加载的（比如从后端接口获取、或者Vuex的异步action初始化），那在created钩子执行的瞬间，user可能还没被赋值，这时候this.user.id就会变成undefined，导致你的fetchPostsByUser分发动作失败。

针对这个场景，给你几个实用的解决方案：

方案一：先判断用户是否就绪再触发请求 #

在created里先做个简单的判断，确保user存在且有id值：

created() {
  // 使用可选链操作符（?.）避免报错，Vue2项目需要安装@vue/composition-api或babel兼容插件
  if (this.user?.id) {
    this.$store.dispatch('posts/fetchPostsByUser', this.user.id)
  }
}

方案二：监听user的变化，动态触发请求 #

如果user是异步加载的，用watch监听user的变化会更可靠——不管user什么时候加载完成，都能自动触发请求：

computed: {
  posts() { return this.$store.getters['posts/postsByUser'] },
  loggedIn() { return this.$store.getters['auth/check']; },
  user() { return this.$store.getters['auth/user'] }
},
watch: {
  // 监听user的变化
  user(newUser) {
    if (newUser?.id) {
      this.$store.dispatch('posts/fetchPostsByUser', newUser.id)
    }
  }
},
created() {
  // 页面初始化时如果user已经存在，直接触发一次
  if (this.user?.id) {
    this.$store.dispatch('posts/fetchPostsByUser', this.user.id)
  }
}

方案三：等待用户初始化完成再请求（适合有异步初始化逻辑的场景） #

如果你的auth模块有专门的异步action用来加载用户信息（比如fetchUser），可以用async/await确保用户信息加载完成后再请求帖子：

async created() {
  // 先等待用户信息加载完成
  await this.$store.dispatch('auth/fetchUser')
  
  // 现在可以安全地访问user.id了
  if (this.user.id) {
    this.$store.dispatch('posts/fetchPostsByUser', this.user.id)
  }
}

顺便补充个小知识点：computed属性本质是基于依赖缓存的响应式属性，你可以像访问data中的普通属性一样，在任何钩子函数或方法中通过this.xxx来访问它们，只要它们的依赖已经准备就绪就行~

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