Give this to data()

This commit is contained in:
Sebastien Chopin 2017-04-14 16:31:14 +02:00
parent b0d33bdc4b
commit e2ad6517e2
3 changed files with 22 additions and 39 deletions

View File

@ -3,7 +3,7 @@
import Vue from 'vue' import Vue from 'vue'
import middleware from './middleware' import middleware from './middleware'
import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index' import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
import { getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, promiseSeries, promisify, getLocation, compile } from './utils' import { applyAsyncData, getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, promiseSeries, promisify, getLocation, compile } from './utils'
const noopData = () => { return {} } const noopData = () => { return {} }
const noopFetch = () => {} const noopFetch = () => {}
let _lastPaths = [] let _lastPaths = []
@ -148,18 +148,7 @@ function render (to, from, next) {
if (Component.options.asyncData && typeof Component.options.asyncData === 'function') { if (Component.options.asyncData && typeof Component.options.asyncData === 'function') {
var promise = promisify(Component.options.asyncData, context) var promise = promisify(Component.options.asyncData, context)
promise.then((asyncDataResult) => { promise.then((asyncDataResult) => {
let data = {} applyAsyncData(Component, asyncDataResult)
// Call data() if defined
if (Component.options.data && typeof Component.options.data === 'function') {
data = Component.options.data()
}
// Merge data() and asyncData() results
data = Object.assign(data, asyncDataResult)
// Overwrite .data() method with merged data
Component.options.data = () => data
if (Component._Ctor && Component._Ctor.options) {
Component._Ctor.options.data = Component.options.data
}
<%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %> <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %>
}) })
promises.push(promise) promises.push(promise)
@ -218,7 +207,7 @@ function fixPrepatch (to, ___) {
_lastComponentsFiles = instances.map((instance, i) => { _lastComponentsFiles = instances.map((instance, i) => {
if (!instance) return ''; if (!instance) return '';
if (_lastPaths[i] === instance.constructor._path && typeof instance.constructor.options.data === 'function') { if (_lastPaths[i] === instance.constructor._path && typeof instance.constructor.options.data === 'function') {
let newData = instance.constructor.options.data() let newData = instance.constructor.options.data.call(instance)
for (let key in newData) { for (let key in newData) {
Vue.set(instance.$data, key, newData[key]) Vue.set(instance.$data, key, newData[key])
} }
@ -305,13 +294,10 @@ function addHotReload ($component, depth) {
return callMiddleware.call(this, Components, context, this.layout) return callMiddleware.call(this, Components, context, this.layout)
}) })
.then(() => { .then(() => {
// Call asyncData() // Call asyncData(context)
let pAsyncData = promisify(Component.options.asyncData || noopData, context) let pAsyncData = promisify(Component.options.asyncData || noopData, context)
pAsyncData.then((asyncDataResult) => { pAsyncData.then((asyncDataResult) => {
let data = (typeof Component.options.data === 'function' ? Component.options.data() : noopData()) applyAsyncData(Component, asyncDataResult)
data = Object.assign(data, asyncDataResult)
Component.options.data = () => data
Component._Ctor.options.data = Component.options.data
<%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %> <%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %>
}) })
promises.push(pAsyncData) promises.push(pAsyncData)
@ -350,16 +336,7 @@ const resolveComponents = flatMapComponents(router.match(path), (Component, _, m
Component.extendOptions = Component.options Component.extendOptions = Component.options
} }
if (NUXT.serverRendered) { if (NUXT.serverRendered) {
let data = {} applyAsyncData(Component, NUXT.data[index])
if (Component.options.data && typeof Component.options.data === 'function') {
data = Component.options.data()
}
// Merge data() and asyncData() results
data = Object.assign(data, NUXT.data[index])
Component.options.data = () => data
if (Component._Ctor && Component._Ctor.options) {
Component._Ctor.options.data = Component.options.data
}
} }
match.components[key] = Component match.components[key] = Component
resolve(Component) resolve(Component)

View File

@ -8,7 +8,7 @@ import { stringify } from 'querystring'
import { omit } from 'lodash' import { omit } from 'lodash'
import middleware from './middleware' import middleware from './middleware'
import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index' import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
import { getMatchedComponents, getContext, promiseSeries, promisify, urlJoin } from './utils' import { applyAsyncData, getMatchedComponents, getContext, promiseSeries, promisify, urlJoin } from './utils'
const isDev = <%= isDev %> const isDev = <%= isDev %>
const _app = new Vue(app) const _app = new Vue(app)
@ -172,15 +172,8 @@ export default context => {
let promise = promisify(Component.options.asyncData, ctx) let promise = promisify(Component.options.asyncData, ctx)
// Call asyncData(context) // Call asyncData(context)
promise.then((asyncDataResult) => { promise.then((asyncDataResult) => {
let data = {} applyAsyncData(Component, asyncDataResult)
// Call data() if defined return asyncDataResult
if (Component.options.data && typeof Component.options.data === 'function') {
data = Component.options.data()
}
// Merge data() and asyncData() results
data = Object.assign(data, asyncDataResult)
Component.options.data = () => data
Component._Ctor.options.data = Component.options.data
}) })
promises.push(promise) promises.push(promise)
} else { } else {

View File

@ -1,6 +1,19 @@
'use strict' 'use strict'
import { app } from './index' import { app } from './index'
const noopData = () => ({})
export function applyAsyncData (Component, asyncData = {}) {
const ComponentData = Component.options.data || noopData
Component.options.data = function () {
const data = ComponentData.call(this)
return { ...data, ...asyncData }
}
if (Component._Ctor && Component._Ctor.options) {
Component._Ctor.options.data = Component.options.data
}
}
export function getMatchedComponents (route) { export function getMatchedComponents (route) {
return [].concat.apply([], route.matched.map(function (m) { return [].concat.apply([], route.matched.map(function (m) {
return Object.keys(m.components).map(function (key) { return Object.keys(m.components).map(function (key) {