feat(vue-app): add $nuxt.refresh() (#6194)

* feat(vue-app): add $nuxt.refreshPageData()

* hotifx: lint

* chore: use getMatchedComponentsInstance util

* fix: rename to refreshPage

* fix: rename to refresh

* feat: add $nuxt.$context and handle error

* feat: set $nuxt.context

* hotfix: test
This commit is contained in:
Sébastien Chopin 2019-08-07 15:12:02 +02:00 committed by GitHub
parent 6ec7654eb6
commit 09878cd6dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 63 additions and 1 deletions

View File

@ -1,4 +1,5 @@
import Vue from 'vue'
import { getMatchedComponentsInstances, promisify, globalHandleError } from './utils'
<% if (loading) { %>import NuxtLoading from '<%= (typeof loading === "string" ? loading : "./components/nuxt-loading.vue") %>'<% } %>
<%if (buildIndicator) { %>import NuxtBuildIndicator from './components/nuxt-build-indicator'<% } %>
<% css.forEach((c) => { %>
@ -73,6 +74,8 @@ export default {
}
// Add $nuxt.error()
this.error = this.nuxt.error
// Add $nuxt.context
this.context = this.$options.context
},
<% if (loading) { %>
mounted() {
@ -100,6 +103,40 @@ export default {
}
}
},
async refresh() {
const pages = getMatchedComponentsInstances(this.$route)
if (!pages.length) {
return
}
<% if (loading) { %>this.$loading.start()<% } %>
const promises = pages.map(async (page) => {
const p = []
if (page.$options.fetch) {
p.push(promisify(page.$options.fetch, this.context))
}
if (page.$options.asyncData) {
p.push(
promisify(page.$options.asyncData, this.context)
.then((newData) => {
for (const key in newData) {
Vue.set(page.$data, key, newData[key])
}
})
)
}
return Promise.all(p)
})
try {
await Promise.all(promises)
} catch (error) {
<% if (loading) { %>this.$loading.fail()<% } %>
globalHandleError(error)
this.error(error)
}
<% if (loading) { %>this.$loading.finish()<% } %>
},
<% if (loading) { %>
errorChanged() {
if (this.nuxt.err && this.$loading) {

View File

@ -291,6 +291,16 @@ describe('basic browser', () => {
expect(p).toBe('Nuxt.js')
})
test('/refresh-page-data', async () => {
const page = await browser.page(url('/refresh-page-data'))
let h1 = await page.$text('h1')
expect(h1).toContain('Hello from server')
await page.evaluate($nuxt => $nuxt.refresh(), page.$nuxt)
h1 = await page.$text('h1')
expect(h1).toContain('Hello from client')
page.close()
})
// Close server and ask nuxt to stop listening to file changes
afterAll(async () => {
await nuxt.close()

View File

@ -0,0 +1,15 @@
<template>
<h1>
Hello from {{ name }}
</h1>
</template>
<script>
export default {
asyncData () {
return {
name: process.static ? 'static' : (process.server ? 'server' : 'client')
}
}
}
</script>

View File

@ -36,6 +36,6 @@ describe('size-limit test', () => {
const responseSizeBytes = responseSizes.reduce((bytes, responseLength) => bytes + responseLength, 0)
const responseSizeKilobytes = Math.ceil(responseSizeBytes / 1024)
// Without gzip!
expect(responseSizeKilobytes).toBeLessThanOrEqual(195)
expect(responseSizeKilobytes).toBeLessThanOrEqual(196)
})
})