更强大的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 相关文章推荐
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
jQuery拖动图片删除示例
May 10 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/14 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
详解如何较好的使用js
2016/12/16 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
JavaScript迭代器的含义及用法
2019/06/21 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
奥巴马演讲稿
2014/01/08 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
道德之星事迹材料
2014/05/03 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
东京审判观后感
2015/06/01 职场文书
安全温馨提示语大全
2015/07/14 职场文书