[翻译] 理解Nuxt 2.12中的 fetch

在研究 Nuxt 源码的过程中发现 fetch 的运行过程竟然和官网上说的完全不同，于是我灵机一动去看了英文官网...  果然 Nuxt 2.12 中更新了 fetch，可以说完全变了个样，更加强大好用了，但是中文官网的文档还是 2.11.X ，并没有更新。看了英语文档之后在官网发现了这篇 博文，写得很不错，想翻译过来给学习 Nuxt 的同学一个参考，毕竟现在中文资料基本没有，限于水平，有错误还请指出。

 

介绍

Nuxt在最新发布的2.12版本中引入了一个新的方法-- fetch。Fetch 提供了一种全新的方式将数据引入Nuxt应用程序中。在这篇文章中，我们将探讨 fetch 钩子的不同功能，并尝试了解它的工作原理。

Fetch 钩子函数 & Nuxt 生命周期

Nuxt 的钩子函数 fetch 运行在 Vue 的 create 钩子函数之后，正如我们所知，所有的 Vue 生命周期钩子函数都是在他们对应的 this 上下文中被调用，fetch 也不例外。

Fetch 钩子函数是在服务器端组件实例化后调用的，这使得 fetch 函数可以通过 this 来引用组件的实例对象。

export default {
  fetch() {
    console.log(this);
  }
};

让我来看看这对页面组件来说意味着什么。

对页面组件而言

在 this 上下文的帮助下，fetch 可以直接更改组件的 data ，这意味着我们可以直接设置组件的本地数据，而不需要使用类似 Vuex 这种外部储存来储存数据。


这样一来，Vuex 就变成一个可选项了。当然如果你需要使用的话，还是能够使用 this.$store 来访问。

Fetch 钩子函数的可用性

通过 fetch 函数我们可以在任何 Vue 组件中预取异步数据，这意味着之前只能在 page 目录下的 Vue 组件才能使用的限制没有了，所有的 Vue 组件都可以使用 fetch 函数。比如 /layouts 和 /components 目录下的 vue 组件。
我们来看看这对 layouts 和 building-block 组件来说意味着什么

Layout 组件

通过使用新的 fetch