数据预取和状态

数据预取存储容器 (Data Store)

在服务器端渲染(SSR)期间,我们本质上是在渲染我们应用程序的”快照”,所以如果应用程序依赖于一些异步数据,那么在开始渲染过程之前,需要先预取和解析好这些数据

另一个需要关注的问题是在客户端,在挂载 (mount) 到客户端应用程序之前,需要获取到与服务器端应用程序完全相同的数据 - 否则,客户端应用程序会因为使用与服务器端应用程序不同的状态,然后导致混合失败。

为了解决这个问题,获取的数据需要位于视图组件之外,即放置在专门的数据预取存储容器(data store)或”状态容器(state container))”中。首先,在服务器端,我们可以在渲染之前预取数据,并将数据填充到 store 中。此外,我们将在 HTML 中序列化(serialize)和内联预置(inline)状态。这样,在挂载(mount)到客户端应用程序之前,可以直接从 store 获取到内联预置(inline)状态。

为此,我们将使用官方状态管理库 Vuex。我们先创建一个 store.js 文件,里面会模拟一些根据 id 获取 item 的逻辑:

  1. // store.js
  2. import Vue from 'vue'
  3. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  5. // 假定我们有一个可以返回 Promise 的
  6. // 通用 API(请忽略此 API 具体实现细节)
  7. import { fetchItem } from './api'
  8. export function createStore () {
  9. return new Vuex.Store({
  10. state: {
  11. items: {}
  12. },
  13. actions: {
  14. fetchItem ({ commit }, id) {
  15. // `store.dispatch()` 会返回 Promise,
  16. // 以便我们能够知道数据在何时更新
  17. return fetchItem(id).then(item => {
  18. commit('setItem', { id, item })
  19. })
  20. }
  21. },
  22. mutations: {
  23. setItem (state, { id, item }) {
  24. Vue.set(state.items, id, item)
  25. }
  26. }
  27. })
  28. }

然后修改 app.js

  1. // app.js
  2. import Vue from 'vue'
  3. import App from './App.vue'
  4. import { createRouter } from './router'
  5. import { createStore } from './store'
  6. import { sync } from 'vuex-router-sync'
  7. export function createApp () {
  8. // 创建 router 和 store 实例
  9. const router = createRouter()
  10. const store = createStore()
  11. // 同步路由状态(route state)到 store
  12. sync(store, router)
  13. // 创建应用程序实例,将 router 和 store 注入
  14. const app = new Vue({
  15. router,
  16. store,
  17. render: h => h(App)
  18. })
  19. // 暴露 app, router 和 store。
  20. return { app, router, store }
  21. }

带有逻辑配置的组件 (Logic Collocation with Components)

那么,我们在哪里放置「dispatch 数据预取 action」的代码?

我们需要通过访问路由,来决定获取哪部分数据 - 这也决定了哪些组件需要渲染。事实上,给定路由所需的数据,也是在该路由上渲染组件时所需的数据。所以在路由组件中放置数据预取逻辑,是很自然的事情。

我们将在路由组件上暴露出一个自定义静态函数 asyncData。注意,由于此函数会在组件实例化之前调用,所以它无法访问 this。需要将 store 和路由信息作为参数传递进去:

  1. <!-- Item.vue -->
  2. <template>
  3. <div>{{ item.title }}</div>
  4. </template>
  5. <script>
  6. export default {
  7. asyncData ({ store, route }) {
  8. // 触发 action 后,会返回 Promise
  9. return store.dispatch('fetchItem', route.params.id)
  10. },
  11. computed: {
  12. // 从 store 的 state 对象中的获取 item。
  13. item () {
  14. return this.$store.state.items[this.$route.params.id]
  15. }
  16. }
  17. }
  18. </script>

服务器端数据预取 (Server Data Fetching)

entry-server.js 中,我们可以通过路由获得与 router.getMatchedComponents() 相匹配的组件,如果组件暴露出 asyncData,我们就调用这个方法。然后我们需要将解析完成的状态,附加到渲染上下文(render context)中。

// entry-server.js
import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      // 对所有匹配的路由组件调用 `asyncData()`
      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        // 在所有预取钩子(preFetch hook) resolve 后,
        // 我们的 store 现在已经填充入渲染应用程序所需的状态。
        // 当我们将状态附加到上下文,
        // 并且 `template` 选项用于 renderer 时,
        // 状态将自动序列化为 `window.__INITIAL_STATE__`,并注入 HTML。
        context.state = store.state

        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

当使用 template 时,context.state 将作为 window.__INITIAL_STATE__ 状态,自动嵌入到最终的 HTML 中。而在客户端,在挂载到应用程序之前,store 就应该获取到状态:

// entry-client.js

const { app, router, store } = createApp()

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

客户端数据预取 (Client Data Fetching)

在客户端,处理数据预取有两种不同方式:

  1. 在路由导航之前解析数据:

    使用此策略,应用程序会等待视图所需数据全部解析之后,再传入数据并处理当前视图。好处在于,可以直接在数据准备就绪时,传入视图渲染完整内容,但是如果数据预取需要很长时间,用户在当前视图会感受到”明显卡顿”。因此,如果使用此策略,建议提供一个数据加载指示器 (data loading indicator)。

    我们可以通过检查匹配的组件,并在全局路由钩子函数中执行 asyncData 函数,来在客户端实现此策略。注意,在初始路由准备就绪之后,我们应该注册此钩子,这样我们就不必再次获取服务器提取的数据。

    // entry-client.js
    
    // ...忽略无关代码
    
    router.onReady(() => {
     // 添加路由钩子函数,用于处理 asyncData.
     // 在初始路由 resolve 后执行,
     // 以便我们不会二次预取(double-fetch)已有的数据。
     // 使用 `router.beforeResolve()`,以便确保所有异步组件都 resolve。
     router.beforeResolve((to, from, next) => {
       const matched = router.getMatchedComponents(to)
       const prevMatched = router.getMatchedComponents(from)
    
       // 我们只关心非预渲染的组件
       // 所以我们对比它们,找出两个匹配列表的差异组件
       let diffed = false
       const activated = matched.filter((c, i) => {
         return diffed || (diffed = (prevMatched[i] !== c))
       })
    
       if (!activated.length) {
         return next()
       }
    
       // 这里如果有加载指示器 (loading indicator),就触发
    
       Promise.all(activated.map(c => {
         if (c.asyncData) {
           return c.asyncData({ store, route: to })
         }
       })).then(() => {
    
         // 停止加载指示器(loading indicator)
    
         next()
       }).catch(next)
     })
    
     app.$mount('#app')
    })
    
  2. 匹配要渲染的视图后,再获取数据:

    此策略将客户端数据预取逻辑,放在视图组件的 beforeMount 函数中。当路由导航被触发时,可以立即切换视图,因此应用程序具有更快的响应速度。然而,传入视图在渲染时不会有完整的可用数据。因此,对于使用此策略的每个视图组件,都需要具有条件加载状态。

    这可以通过纯客户端 (client-only) 的全局 mixin 来实现:

    Vue.mixin({
     beforeMount () {
       const { asyncData } = this.$options
       if (asyncData) {
         // 将获取数据操作分配给 promise
         // 以便在组件中,我们可以在数据准备就绪后
         // 通过运行 `this.dataPromise.then(...)` 来执行其他任务
         this.dataPromise = asyncData({
           store: this.$store,
           route: this.$route
         })
       }
     }
    })
    

这两种策略是根本上不同的用户体验决策,应该根据你创建的应用程序的实际使用场景进行挑选。但是无论你选择哪种策略,当路由组件重用(同一路由,但是 params 或 query 已更改,例如,从 user/1user/2)时,也应该调用 asyncData 函数。我们也可以通过纯客户端 (client-only) 的全局 mixin 来处理这个问题:

Vue.mixin({
  beforeRouteUpdate (to, from, next) {
    const { asyncData } = this.$options
    if (asyncData) {
      asyncData({
        store: this.$store,
        route: to
      }).then(next).catch(next)
    } else {
      next()
    }
  }
})

Store 代码拆分 (Store Code Splitting)

在大型应用程序中,我们的 Vuex store 可能会分为多个模块。当然,也可以将这些模块代码,分割到相应的路由组件 chunk 中。假设我们有以下 store 模块:

// store/modules/foo.js
export default {
  namespaced: true,
  // 重要信息:state 必须是一个函数,
  // 因此可以创建多个实例化该模块
  state: () => ({
    count: 0
  }),
  actions: {
    inc: ({ commit }) => commit('inc')
  },
  mutations: {
    inc: state => state.count++
  }
}

我们可以在路由组件的 asyncData 钩子函数中,使用 store.registerModule 惰性注册(lazy-register)这个模块:

// 在路由组件内
<template>
  <div>{{ fooCount }}</div>
</template>

<script>
// 在这里导入模块,而不是在 `store/index.js` 中
import fooStoreModule from '../store/modules/foo'

export default {
  asyncData ({ store }) {
    store.registerModule('foo', fooStoreModule)
    return store.dispatch('foo/inc')
  },

  // 重要信息:当多次访问路由时,
  // 避免在客户端重复注册模块。
  destroyed () {
    this.$store.unregisterModule('foo')
  },

  computed: {
    fooCount () {
      return this.$store.state.foo.count
    }
  }
}
</script>

由于模块现在是路由组件的依赖,所以它将被 webpack 移动到路由组件的异步 chunk 中。


哦?看起来要写很多代码!这是因为,通用数据预取可能是服务器渲染应用程序中最复杂的问题,我们正在为下一步开发做前期准备。一旦设定好模板示例,创建单独组件实际上会变得相当轻松。