mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 00:23:53 +00:00
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:
parent
6ec7654eb6
commit
09878cd6dc
@ -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) {
|
||||
|
@ -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()
|
||||
|
15
test/fixtures/basic/pages/refresh-page-data.vue
vendored
Normal file
15
test/fixtures/basic/pages/refresh-page-data.vue
vendored
Normal 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>
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user