Permalink
Browse files

fetch data in client side

  • Loading branch information...
njleonzhang committed Jul 25, 2018
1 parent 2620036 commit a41de3b77ceda01d5dd3751b1aa5da1d552dc792
Showing with 31 additions and 1 deletion.
  1. +1 −1 dist/client-bundle.js
  2. +30 −0 src/entry-client.js

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -11,4 +11,34 @@ if (window.__INITIAL_STATE__) {
router.onReady(() => {
// 这里假定 App.vue 模板中根元素具有 id="app"
app.$mount('#app')

// Add router hook for handling asyncData.
// Doing it after initial route is resolved so that we don't double-fetch the data that we already have. // Using `router.beforeResolve()` so that all async components are resolved.

router.beforeResolve((to, from , next) => {
const matched = router.getMatchedComponents(to)
const prevMatched = router.getMatchedComponents(from)

// we only care about non-previously-rendered components,
// so we compare them until the two matched lists differ
let diffed = false
const activated = matched.filter((c, i) => {
return diffed || (diffed = (prevMatched[i] !== c))
})

if (!activated.length) {
return next()
}

// this is where we should trigger a loading indicator if there is one
Promise.all(activated.map(c => {
if (c.asyncData) {
alert('fetch data in client side')
return c.asyncData({ store, route: to })
}
})).then(() => {
// stop loading indicator
next()
}).catch(next)
})

This comment has been minimized.

@njleonzhang

njleonzhang Jul 26, 2018

Author Owner

官方文档中文翻译这块叫做客户端数据预取,其实似乎不太恰当,实际上就是客户端如何拉数据的一个建议方案。为了复用 asyncData 这个后台预取数据函数的一种方案,本身并不神奇,也和后台预取数据是2个概念。

})

0 comments on commit a41de3b

Please sign in to comment.