更强大的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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
domReady的实现案例
Nov 23 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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
理解PHP中的stdClass类
2014/04/18 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
jquery each()源代码
2011/02/14 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
jquery使用经验小结
2015/05/20 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python远程连接MySQL数据库
2019/04/19 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
优秀学生事迹材料
2014/02/08 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
诉讼授权委托书
2014/10/15 职场文书
统计员岗位职责范本
2015/04/14 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技
python playwright之元素定位示例详解
2022/07/23 Python