data

data(transition) [-> Promise]

在激活阶段被调用,在 activate 被断定( resolved ,指该函数返回的 promise 被 resolve )。用于加载和设置当前组件的数据。

参数

  • transition {Transition}

    调用 transition.next(data) 会为组件的 data 相应属性赋值。例如,使用 { a: 1, b: 2 } ,路由会调用 component.$set('a', 1) 以及 component.$set('b', 2)

预期返回值

  • 可选择性返回一个Promise

    • resolve(data) -> transition.next(data)
    • reject(reason) -> transition.abort(reason)
  • 或者,返回一个包含 Promise 的对象。见后文 Promise 语法糖

详情

data 切换钩子会在 activate 被断定( resolved )以及界面切换之前被调用。切换进来的组件会得到一个名为 $loadingRouteData 的元属性,其初始值为 false ,在 data 钩子函数被断定后会被赋值为 true 。这个属性可用来会切换进来的组件展示加载效果。

data 钩子和 activate 钩子的不同之处在于:

  1. data在每次路由变动时都会被调用,即使是当前组件可以被重用的时候,但是 activate 尽在组件是新创建时才会被调用。

    假设我们有一个组件对应于路由 /message/:id ,当前用户所处的路径是 /message/1 。当用户浏览 /message/2 时,当前组件可以被重用,所以 activate 不会被调用。但是我们需要根据新的 id 参数去获取和更新数据,所以大部分情况下,在 data 中获取数据比在 activate 中更加合理。

  2. activate 的作用是控制切换到新组件的时机。data 切换钩子会在 activate 被断定( resolved )以及界面切换之前被调用,所以数据获取和新组件的切入动画是并行进行的,而且在 data 被断定( resolved )之前,组件会处在“加载”状态。

    从用户体验的角度来看一下两者的区别:

    • 如果我们等到获取到数据之后再显示新组件,用户会感觉在切换前界面被卡住了。

    • 相反的话(指不用等到获取数据后再显示组件),我们立刻响应用户的操作,切换视图,展示新组件的“加载”状态。如果我们在 CSS 中定义好相应的效果,这正好可以用来掩饰数据加载的时间。

这么说的话,如果你想等到数据获取之后再切换视图,可以在组件定义路由选项时,添加 waitForData: true 参数。

例子

调用 transition.next

route: {
  data: function (transition) {
    setTimeout(function () {
      transition.next({
        message: 'data fetched!'
      })
    }, 1000)
  }
}

返回 Promise :

route: {
  data: function () {
    return messageService
      .fetch(transition.to.params.messageId)
      .then(function (message) {
        return { message: message }
      })
  }
}

并发请求,利用 Promise & ES6 :

route: {
  data ({ to: { params: { userId }}}) {
    return Promise.all([
      userService.get(userId),
      postsService.getForUser(userId)
    ]).then(([user, post]) => ({ user, post }))
  }
}

与上面等价的 ES5 版本:

route: {
  data (transition) {
    var userId = transition.to.params.userId
    return Promise.all([
      userService.get(userId),
      postsService.getForUser(userId)
    ]).then(function (data) {
      return {
        user: data[0],
        posts: data[1]
      }
    })
  }
}

在模板中使用 $loadingRouteData

<div class="view">
  <div v-if="$loadingRouteData">Loading ...</div>
  <div v-if="!$loadingRouteData">
    <user-profile user="{{user}}"></user-profile>
    <user-post v-repeat="post in posts"></user-post>
  </div>
</div>

Promise 语法糖

上面的并发请求示例需要我们自己调用 Promise.all 来将多个 Promise 合并成一个,并且最终处理返回的数据时也有些繁琐。vue-router 在这里提供了一个语法糖,让我们可以在 data 函数中直接返回一个包含 Promise 的对象(当然也可以包含非 Promise 的值)。利用这个语法糖和 ES6,我们可以这样实现上面的例子:

route: {
  data: ({ to: { params: { userId }}}) => ({
    user: userService.get(userId),
    post: postsService.getForUser(userId)
  })
}

路由器将会在这两个 Promise resolve 之后的值分别赋值给组件的 userpost 属性。同时,$loadingRouteData 会在所有的 Promise 都 resolve 之后被设置为 false

上面的例子在 ES5 下可以这样写:

route: {
  data: function (transition) {
    var userId = transition.to.params.userId
    return {
      user: userService.get(userId),
      post: postsService.getForUser(userId)
    }
  }
}
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部