更强大的vue ssr实现数据预取

前几天在一篇文章里吹了两个牛皮，截图证明了这一点：

现在可以放心的说，两个牛皮都实现了，但是vue-suspension已经改名为vue-async-manager，可以帮助你管理异步组件的加载和Vue应用中API的调用，并提供了一个与React suspension同名的‘suspend’组件，Github:

水地-fed/vue-异步-经理github.com

第二个牛皮是开发vue-async-manager过程中的临时灵感。我以为同样的技术也可以用在SSR预取数据上，但当时没有尝试，只是有了一个想法，但幸运的是，我成功了。GitHub:

https://github.com/HcySunYang/vue-ssr-prefetchergithub.com

Vue-ssr-预取器为Vue的SSR(压缩后只有1kb)提供了更直观、更强大的数据预取方法。让我们看一下这个比较图：

接下来，我们将详细介绍vue-ssr预取器：

为什么呢？

在Vue的服务器端渲染中，预取数据有两种方式，一种是nuxt/ream表示的asyncData，另一种是Vue原生提供的serverPrefetch组件选项。然而，这两种方案都有一些缺点：

数字/令的异步数据：

无法访问这只能用于路由组件(或页面组件)。有必要通过返回对象(或承诺)向呈现环境公开数据。Vue原生提供的服务器预取：

只有在服务器上运行，客户端才需要编写另一个数据采集逻辑，避免重复采集数据。只能预取存储数据，数据不能暴露给组件级呈现环境并发送给客户端。以上两种方案也有一个共同的缺点：不直观(因为和开发SPA时写代码的方式不同)。vue-ssr-预取器提供了更直观的数据预取方案，换句话说，在预取数据的过程中你看不到任何SSR痕迹，就像写SPA应用一样。

装置

纱线添加vue-SSR-预取错误使用npm :

使用NPM安装-SSR-预取-保存

vue-SSR-pretcher提供了两个vue插件：serverPlugin和clientPlugin，分别用于服务器入口和客户端入口。

在服务器条目中：

从“vue”导入vue“从导入创建应用程序”。/create app//1。从“vue-SSR-预取”/2导入serverplugin {serverplugin}。安装插件vue.use (server plugin)导出默认异步上下文={const {app，router，store }=createApp()router . push(context . URL)await router ready(router)//3。set context . rendered as server plugin . done context . rendered=serverplugin.done//4.app. $ $ self store是服务器插件注入的属性context . state={ $ $ stro e : store？store.state :未定义，$$selfStore:应用程序。$$selfStore }返回app }函数routerReady(路由器){返回新的Promise(resolve={ router . onready(resolve)})} server plugin将注入app。$$selfStore属性放入存储组件级数据的根组件实例中。您只需要将它添加到上下文中。此外，您还需要将上下文设置为服务器插件。完成.

在客户端条目中：

从“vue”导入vue“从导入创建应用程序”。/create app//1。导入插件从' vue-SSR-prefetch '/2导入{client plugin}。安装插件Vue.use(clientPlugin) const { app，路由器，Store }=create app()router . onready()={//3。解构$ $ self store const { $ $ self store }=window。__INITIAL_STATE__//4。将数据添加到组件实例if ($ $ selfstore)应用程序。$ $ selfstore=$ $ selfstore app。$mount ('# app')//5。这一点非常重要，它是用来避免重复数据采集的，而且必须在$ mount()函数clientPlugin之后进行检查。$$resolved=true})

如上所述完成配置后，您可以发送一个请求来预取任何组件的已创建钩子中的数据：

导出默认值{ name: 'Example '，data() { return { name: 'Hcy' } }，Asyncccreated(){//this。$ createfetcher()函数由clientPlugin注入//接收一个返回promise作为参数的函数。例如，对于请求api函数const fetcher=this。$ create fetch er(fetch name)const RES=await fetch er()this。name=res.name}}如上面的代码所示，与过去的唯一区别是您需要调用这个。$createFetcher函数来创建一个Fetcher，你可能会觉得不舒服。然而，事实上，这。$createFetcher做非常简单的事情。下面是它的源代码：

vue . prototype . $ createFetcher=function(fetcher){ const VM=这个返回函数(params 3360 any){ const p=fetcher(params)VM。$$promises.push(p) Return p }}只是一个简单的包装器，所以我们可以认为这个创建的fetcher。$createFetcher函数与原始函数相同。

虽然看起来和开发SPA应用时没什么不同，但是vue-SSR-pretcher已经为你做了很多事情。我们来对比一下，还是同样的画面：

当然，vue-SSR-pretcher也为您制作了：

避免重复获取数据。当路由跳转时，您应该能够正常发送请求，几乎不需要做任何事情。你唯一需要做的就是用这个。$createFetcher函数创建Fetcher，但是真的没有黑科技。

要与vuex一起使用，您只需：

export default { name : ' example '，async created(){ const fetcher=this。$ createfetcher (()=this。$ store . dispatch(' some action '))fetcher()} }当然，也可以使用mapActions将动作映射到方法。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。