Vue.js:定义服务

我正在寻找Vue.js作为Angular的替代产品,到目前为止我真的很喜欢。为了感觉到这一点,我将现有的Angular项目重构为Vue项目。我正好需要与我的REST API通信。

在Angular中,我曾经为此定义了一个服务,该服务被注入到每个需要它的控制器中。据我了解,Vue似乎并不了解“服务”构造。在Vue中如何实现?

我考虑过了vue-resource,但据我了解,它仅用于http功能。当我也使用jQuery时,这已经过时了。

例:

我有vueComponent1vueComponent2两者都需要访问相同的REST资源。为了解决这个问题,我需要一个中央服务,这两个组件都可以用于对REST资源的请求。Angular具有“服务”组件,正是这一点。Vue还没有。

宝儿理查德村村2020/03/10 14:11:15

在这个问题中,您对此有一些很好的答案。VueJS中的Angular Service相当于什么?

就像@Otabek Kholikov所说的那样-您有4种选择:

  1. 无状态服务:那么您应该使用mixins
  2. 全状态服务:使用Vuex
  3. 导出服务并从vue代码导入
  4. 任何javascript全局对象

在我的项目中,我更喜欢(4)。它给了我最大的灵活性,只有我需要的实现(我不带Vuex,也不应该严格遵守它的规则,没有“魔术”-所有代码都是我的)。您在上面提到问题中有一个实现示例

阳光Tom逆天2020/03/10 14:11:15

来自有关构建大型应用程序的Vue.js文档

社区贡献了vue-resource插件,该插件提供了使用RESTful API的简便方法。您还可以使用任何喜欢的Ajax库,例如$ .ajax或SuperAgent

Vue不需要您遵循特定的架构,因为它仅指MVC或MVVM架构中的View层。正如@Marc回答中所说的那样,一个好的做法是使用诸如Browserify或Webpack之类的模块加载器,以便您可以在单独的文件中创建“服务”,然后将它们导入所需的位置。使用vue-cli使用模块加载器来构建您的应用非常容易

确实,我个人非常喜欢基于组件的应用程序Flux体系结构,然后建议您看一下Vuex,这是一种受Flux启发的应用程序体系结构,专门用于管理Vue.js应用程序中的状态。

这样,您可以创建使用vue-resource来请求您的API的操作,然后可以在数据到达时分派Mutations,所有需要将该数据绑定到全局State的所有组件都会自动做出反应。换句话说,您的组件本身不需要调用服务,它们仅对Mutations调度的状态更改做出反应。