更强大的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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
node.js文件上传处理示例
Oct 27 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
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/12/24 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python递归函数用法详解
2020/10/26 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
linux下进程间通信的方式
2013/01/23 面试题
50道外企软件测试面试题
2014/08/18 面试题
连锁酒店店长职责范本
2014/02/13 职场文书
21岁生日感言
2014/02/27 职场文书
排查整治工作方案
2014/06/09 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
关于读书的活动方案
2014/08/14 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
护理专业自荐信范文
2015/03/06 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
springboot+VUE实现登录注册
2021/05/27 Vue.js
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS