Vue:在哪里调用API?

时间:2019-11-28 16:34:50

标签: vue.js

我目前正在学习Vue,并且正在构建电影数据库应用程序,用户可以在其中查看从外部API提取的电影,并按受欢迎程度和即将来临进行排序。 我必须为这两个类别调用不同的URL,我想知道是否应该在存储所有提取数据的每个组件或单独的第三个组件中执行此操作? 在像这样的小型应用程序中使用Vuex是否有意义,还是有另一种最佳实践?谢谢!

3 个答案:

答案 0 :(得分:4)

恕我直言,Vuex的使用与应用程序的大小无关,而是其结构。如果您想要一个干净的应用程序结构,请将vue SFC保持为“ simple” 。任何逻辑都应该在Vuex中,任何复杂功能都应该在实用程序类中。

在处理使用API​​的应用程序(而不是单个组件)时,我建议将API和数据混合化到Vuex中。 (或者是一个单独的功能,但由vuex启动)

这将允许任何组件不仅可以访问数据,还可以访问数据的加载状态。例如,允许您使用v-if="dataIsLoaded"来表示期望数据存在的组件,而使用v-else来装载指标

答案 1 :(得分:1)

在线上有很多资源,这里有大量的堆栈溢出将指导您执行此操作。在不知道您的应用程序现在有多大以及将有多大的增长的情况下,很难建议是否使用Vuex。无论如何,您进行API调用的位置应该/应该独立于状态管理。

通常,可以在组件的created生命周期挂钩中安全地进行Vue应用程序中的API调用。

created() {}

如果您不打算在多个组件中重用来自API的数据,则可以在需要它的组件中调用它。如果要在第三个组件中执行此操作,它必须是组件周围的一种包装,以备受欢迎和即将推出,然后将接收的数据作为道具传递给这些组件。

方法1:

  • MoviesWrapperComponent:进行API调用并将其向下传递给其他组件
  • PopularMoviesComponent:从MoviesWrapperComponent接收数据
  • UpcomingMoviesComponent:从MoviesWrapperComponent接收数据

方法2:

  • PopularMoviesComponent:进行自己的API调用。
  • UpcomingMoviesComponent:进行自己的API调用。

答案 2 :(得分:-1)

我该怎么做,是每个方法中的Ajax调用,因为这样可以更轻松地处理项目的组成部分和范围。

我正在使用流行的Axios插件,对此我感到非常满意。 https://www.npmjs.com/package/vue-axios

如果您只需要在几个组件之间共享数据,我不会使用vuex,但是如果您想学习如何使用vuex,可以使用它。