如何在vue中使用ssr实现预取数据

发布时间:2022-05-06 13:56:31 作者:iii
来源:亿速云 阅读:413

这篇文章主要介绍“如何在vue中使用ssr实现预取数据”,在日常操作中,相信很多人在如何在vue中使用ssr实现预取数据问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何在vue中使用ssr实现预取数据”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

Why?

在 Vue 的服务端渲染中做数据预取的方式大概可以总结为两种,一种是以 nuxt/ream 为代表的 asyncData 方案,另一种是 Vue 原生提供的 serverPrefetch 组件选项。然而这两种方案都有一些缺点:

nuxt/ream 的 asyncData :

Vue 原生提供的 serverPrefetch :

以上两种方案还拥有一个共同的弊端: 不够直观 (不直观,因为这与开发 SPA 时编写代码的方式不同), vue-ssr-prefetcher 提供了一种更直观的数据预取方案,换句话说你在预取数据的过程中看不出来任何 SSR 的痕迹,就想在编写 SPA 应用一样。

安装

yarn add vue-ssr-prefetcher

Or use npm :

npm install vue-ssr-prefetcher --save

使用

vue-ssr-prefetcher 提供了两个 vue 插件: serverPlugin 和 clientPlugin ,分别用于 server entry 和 client entry 。

在 server entry 中:

import Vue from 'vue'
import createApp from './createApp'
// 1. 引入 serverPlugin
import { serverPlugin } from 'vue-ssr-prefetcher'

// 2. 安装插件
Vue.use(serverPlugin)

export default async context => {
 const { app, router, store } = createApp()

 router.push(context.url)

 await routerReady(router)

 // 3. 设置 context.rendered 为 serverPlugin.done
 context.rendered = serverPlugin.done

 // 4. app.$$selfStore 是 serverPlugin 插件注入的属性
 context.state = {
  $$stroe: store ? store.state : undefined,
  $$selfStore: app.$$selfStore
 }

 return app
}

function routerReady (router) {
 return new Promise(resolve => {
  router.onReady(resolve)
 })
}

serverPlugin 会在根组件实例上注入 app.$$selfStore 属性,存储着组件级别的数据,你只需要将他添加到 context.state 中即可。另外,你还需要将 context.rendered 设置为 serverPlugin.done 。

在 client entry 中:

import Vue from 'vue'
import createApp from './createApp'
// 1. 引入插件
import { clientPlugin } from 'vue-ssr-prefetcher'
// 2. 安装插件
Vue.use(clientPlugin)

const { app, router, store } = createApp()

router.onReady(() => {
 // 3. 从 window.__INITIAL_STATE__ 中解构出 $$selfStore
 const { $$selfStore } = window.__INITIAL_STATE__

 // 4. 将数据添加到跟组件实例
 if ($$selfStore) app.$$selfStore = $$selfStore

 app.$mount('#app')
 // 5. 这个非常重要,它用于避免重复获取数据,并且一定要在 $mount() 函数之后
 clientPlugin.$$resolved = true
})

来看看接下来如何做数据预取

按照上面的介绍配置完成后,你就可以在任何组件的 created 钩子中发送请求预取数据:

export default {
 name: 'Example',
 data() {
  return { name: 'Hcy' }
 },
 async created() {

  // this.$createFetcher() 函数是 clientPlugin 注入的
  // 接收一个返回 promise 的函数作为参数,例如用于请求 api 函数
  const fetcher = this.$createFetcher(fetchName)

  const res = await fetcher()

  this.name = res.name
 }
}

如上代码所示,和过去唯一不同的就是你需要调用 this.$createFetcher 函数创建一个 fetcher ,你可能会觉得这不爽,然而实际上 this.$createFetcher 做的事情很简单,下面是它的源码:

Vue.prototype.$createFetcher = function(fetcher) {
 const vm = this
 return function(params: any) {
  const p = fetcher(params)
  vm.$$promises.push(p)
  return p
 }
}

仅仅是一个简单的包装,因此我们可以把通过 this.$createFetcher 函数创建得到的 fetcher 认为与原函数相同。

虽然看上去和开发 SPA 应用时没什么不同,但 vue-ssr-prefetcher 为你做了很多事情,让我们来对比一下,还是刚才的那种图:

如何在vue中使用ssr实现预取数据

当然了 vue-ssr-prefetcher 还为你做了:

而你几乎什么都不需要做, 唯一需要做的就是使用 this.$createFetcher 函数创建 fetcher ,但这真的没有任何黑科技。

为了配合 vuex 一块使用,你只需要:

export default {
 name: 'Example',
 async created() {
  const fetcher = this.$createFetcher(() => this.$store.dispatch('someAction'))

  fetcher()
 }
}

到此,关于“如何在vue中使用ssr实现预取数据”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. Vue SSR怎么实现即时编译技术
  2. Bundle怎么在Vue SSR中使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue ssr

上一篇:如何在vue中使用pdfjs显示PDF可复制

下一篇:如何在vue-cli3项目中使用webpack4实现换肤功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》