Nuxt如何在fetch/asyncData钩子中访问组件的data与methods

先明确两个Nuxt生命周期钩子的设计限制 #

• asyncData 运行在组件实例创建之前，不存在this上下文，天生无法访问组件内定义的data和methods，没有办法在这个钩子内调用组件内部方法。
• Nuxt2的fetch钩子运行在组件实例创建完成之后，正常可以访问完整的组件实例，包括methods，如果出现只能访问data不能访问methods的情况，大概率是你用箭头函数定义了fetch，绑定了外层this导致的。

可行实现方案 #

方案1：抽离公共请求逻辑到外部工具函数（最推荐）

把重复的请求逻辑抽成独立的工具方法，不管是组件methods还是生命周期钩子都可以直接调用，完美复用逻辑：

1. 新建/utils/post.js存放公共请求逻辑：

// /utils/post.js
export const fetchPostList = (axiosInstance) => {
  return axiosInstance('post')
}

2. 组件内引用使用：

<script>
import { fetchPostList } from '~/utils/post'
export default {
  data(){
    return {
      posts: [],
    }
  },
  async fetch() {
    this.posts = await fetchPostList(this.$axios)
  },
  methods: {
    async get_post(){
      this.posts = await fetchPostList(this.$axios)
    }
  }
}
</script>

方案2：调整请求触发时机到组件实例化完成后的钩子

如果你的请求不需要服务端渲染预取数据，仅需要客户端加载时触发，可以直接在created或者mounted钩子内调用组件方法，这两个钩子内可以正常访问所有data和methods：

<script>
 export default {
  data(){
   return {
    posts: [],
   }
  },
  async created() {
    await this.get_post()
  },
  methods: {
   async get_post(){
    this.posts = await this.$axios('post')
   }
  }
 }
</script>

方案3：修正fetch钩子写法直接调用组件方法

如果需要服务端预取数据，又不想抽离逻辑，确认你没有用箭头函数定义fetch，就可以直接在fetch内调用methods：

<script>
 export default {
  data(){
   return {
    posts: [],
   }
  },
  // 不要写成 async fetch: () => {} 箭头函数会丢失this指向
  async fetch() {
    this.posts = await this.get_post()
  },
  methods: {
   async get_post(){
    return await this.$axios('post')
   }
  }
 }
</script>

内容的提问来源于stack exchange，提问作者Michel Gisenaël