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


Posted in Javascript onJuly 19, 2019

我在前几天的一篇文章中吹了两个牛皮,截图为证:

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

现在可以松口气的说,这两个牛皮都实现了,不过 vue-suspense 改名了,叫做 vue-async-manager 了,他能帮你管理 Vue 应用中的异步组件的加载和 API 的调用,提供了与 React Suspense 同名的 `<Suspense>` 组件,Github:

shuidi-fed/vue-async-manager ​ github.com

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

第二个牛皮是在开发 vue-async-manager 的过程中临时产生的一个灵感,觉得相同的技巧可以用在 SSR 预取数据上,但是当时还没有尝试,只是有个想法而已,不过很幸运,我成功了,GitHub:

https://github.com/HcySunYang/vue-ssr-prefetcher ​ github.com

vue-ssr-prefetcher 为 VueSSR 提供更直观更强大的数据预取方式(压缩后仅 1kb )。让我们来看看这张对比图:

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

接下来详细介绍一下 vue-ssr-prefetcher:

Why?

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

nuxt/reamasyncData

  • 不能访问 this
  • 只能用于路由组件(或 page 组件)
  • 需要通过返回对象(或 promise)将数据暴露到渲染环境

Vue 原生提供的 serverPrefetch

  • 只运行于服务端,客户端需要另外编写数据获取逻辑,并避免数据的重复获取
  • 只能预取 store 数据,无法将数据暴露到组件级别的渲染环境并发送到客户端

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

安装

yarn add vue-ssr-prefetcher

Or use npm :

npm install vue-ssr-prefetcher --save

使用

vue-ssr-prefetcher 提供了两个 vue 插件: serverPluginclientPlugin ,分别用于 server entryclient 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()
 }
}

当然了使用 mapActions 将 action 映射为 methods 也是可以的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
JS实现购物车特效
Feb 02 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 #Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 #Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 #Javascript
Vue动态生成表格的行和列
Jul 18 #Javascript
vue通过数据过滤实现表格合并
Nov 30 #Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 #Javascript
小程序分页实践之编写可复用分页组件
Jul 18 #Javascript
You might like
php生成随机数的三种方法
2014/09/10 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
js继承实现方法详解
2016/12/16 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript