在渲染之前将 ajax 获取的数据设置为组件

Posted 2023-02-23

【中文标题】在渲染之前将 ajax 获取的数据设置为组件

【英文标题】：Set ajax-fetched data to component before render

【发布时间】：2018-10-23 19:41:23

【问题描述】：

我将 Vue Router 与基于文件的组件一起使用。我调用了其中一条路由CaseDetail.vue，它获得了一个参数（slug），该参数从带有axios的API中获取一个json。

我使用“In-Component Guards”执行此操作，方法名为beforeRouteEnter。我正在将 axios 的响应传递给下一个方法。

    axios.get('/case/'+ to.params.slug +'.json').then((response) => 
      next(vm => 
        vm.entry = response.data;
      )
    );

这很有效，但是，Vue 在数据设置之前渲染视图。这会产生undefined 错误。我如何告诉 Vue 等待它获取数据？

我的模板：

<template>
  <main>
    <h1> entry.title </h1>
  </main>
</template>

我的组件：

export default

 name: 'CaseDetail',
 data()
    return         
        entry: null
    ;
 ,

...

【参考方案1】：

处理步骤：

axios api 正在调用 组件已创建 调用beforeRouteEnter 中的next()。那时因为组件创建了，所以vm变量是可用的。

如果你通过控制台登录你的组件

  created() 
    console.log('Component is created!')
  ,
  beforeRouteEnter(to, from, next) 
    setTimeout(() => 
      next(vm => 
        console.log('next() is called')
      )
    , 3000)
  ,

那么结果会是

组件已创建！

next() 被调用

您应该为数据设置默认值，或添加安全检查。

<template>
  <main>
    <h1> entry? entry.title: '' </h1>
  </main>
</template>

【讨论】：

谢谢！设置默认值是有意义的，但是，我希望有一种方法可以防止在组件拥有所需数据之前创建组件。我希望模板中的逻辑尽可能少。是否可以将 GET 数据传递给 beforeCreate 方法或类似方法？

通常我会在组件的created钩子中调用api。同时，我可以向用户显示加载状态。我认为这会带来更好的用户体验。如果你想使用beforeCreate ，当用户点击一个链接时，如果互联网连接或api响应很慢，用户会觉得网站挂了（用户体验不好）

我同意这是更好的用户体验，我正在寻找类似 @​​987654321@ 的示例。但是没有解释他们在示例中使用的（似乎在全局命名空间中）getPost-method 的工作原理。