建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“如何在vue中使用ssr實現(xiàn)預(yù)取數(shù)據(jù)”，在日常操作中，相信很多人在如何在vue中使用ssr實現(xiàn)預(yù)取數(shù)據(jù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何在vue中使用ssr實現(xiàn)預(yù)取數(shù)據(jù)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比朝陽網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式朝陽網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋朝陽地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。
Why?
在 Vue 的服務(wù)端渲染中做數(shù)據(jù)預(yù)取的方式大概可以總結(jié)為兩種，一種是以 nuxt/ream 為代表的 asyncData 方案，另一種是 Vue 原生提供的 serverPrefetch 組件選項。然而這兩種方案都有一些缺點：
nuxt/ream 的 asyncData ：
不能訪問 this
只能用于路由組件(或 page 組件)
需要通過返回對象(或 promise)將數(shù)據(jù)暴露到渲染環(huán)境
Vue 原生提供的 serverPrefetch ：
只運行于服務(wù)端，客戶端需要另外編寫數(shù)據(jù)獲取邏輯，并避免數(shù)據(jù)的重復(fù)獲取
只能預(yù)取 store 數(shù)據(jù)，無法將數(shù)據(jù)暴露到組件級別的渲染環(huán)境并發(fā)送到客戶端
以上兩種方案還擁有一個共同的弊端： 不夠直觀 （不直觀，因為這與開發(fā) SPA 時編寫代碼的方式不同）， vue-ssr-prefetcher 提供了一種更直觀的數(shù)據(jù)預(yù)取方案，換句話說你在預(yù)取數(shù)據(jù)的過程中看不出來任何 SSR 的痕跡，就想在編寫 SPA 應(yīng)用一樣。
安裝
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. 設(shè)置 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 屬性，存儲著組件級別的數(shù)據(jù)，你只需要將他添加到 context.state 中即可。另外，你還需要將 context.rendered 設(shè)置為 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__ 中解構(gòu)出 $$selfStore
const { $$selfStore } = window.__INITIAL_STATE__
// 4. 將數(shù)據(jù)添加到跟組件實例
if ($$selfStore) app.$$selfStore = $$selfStore
app.$mount('#app')
// 5. 這個非常重要，它用于避免重復(fù)獲取數(shù)據(jù)，并且一定要在 $mount() 函數(shù)之后
clientPlugin.$$resolved = true
})來看看接下來如何做數(shù)據(jù)預(yù)取
按照上面的介紹配置完成后，你就可以在任何組件的 created 鉤子中發(fā)送請求預(yù)取數(shù)據(jù)：
export default {
name: 'Example',
data() {
return { name: 'Hcy' }
},
async created() {
// this.$createFetcher() 函數(shù)是 clientPlugin 注入的
// 接收一個返回 promise 的函數(shù)作為參數(shù)，例如用于請求 api 函數(shù)
const fetcher = this.$createFetcher(fetchName)
const res = await fetcher()
this.name = res.name
}
}如上代碼所示，和過去唯一不同的就是你需要調(diào)用 this.$createFetcher 函數(shù)創(chuàng)建一個 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 函數(shù)創(chuàng)建得到的 fetcher 認(rèn)為與原函數(shù)相同。
雖然看上去和開發(fā) SPA 應(yīng)用時沒什么不同，但 vue-ssr-prefetcher 為你做了很多事情，讓我們來對比一下，還是剛才的那種圖：
當(dāng)然了 vue-ssr-prefetcher 還為你做了：
避免重復(fù)獲取數(shù)據(jù)
當(dāng)路由跳轉(zhuǎn)時應(yīng)該能夠正常發(fā)送請求
而你幾乎什么都不需要做， 唯一需要做的就是使用 this.$createFetcher 函數(shù)創(chuàng)建 fetcher ，但這真的沒有任何黑科技。
為了配合 vuex 一塊使用，你只需要：
export default {
name: 'Example',
async created() {
const fetcher = this.$createFetcher(() => this.$store.dispatch('someAction'))
fetcher()
}
}到此，關(guān)于“如何在vue中使用ssr實現(xiàn)預(yù)取數(shù)據(jù)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)頁題目：如何在vue中使用ssr實現(xiàn)預(yù)取數(shù)據(jù)
地址分享：http://ef60e0e.cn/article/ppespp.html
