Vuejs 这是实现服务的好方法吗？答案

【问题标题】：Vuejs Is this a good way of implementing services?Vuejs 这是实现服务的好方法吗？
【发布时间】：2019-01-12 11:21:50
【问题描述】：

我最近学习了 mvc 架构并使用了 angular，现在我正在使用 vuejs，我试图让模型和服务更像 angular 这是一个好方法，有没有更好的方法？这是服务

//service for company
import axios from 'axios';
export default{   

    getCompany(id){

        console.log('using function getCompany');

        return axios.get('http://localhost:8000/api/company/'+id);
    },
}

现在是模型

//model for company
export class CompanyModel{
    name;
    location;
    salary;
    constructor(data){
        this.name = data.name;
        this.location = data.location;
        this.salary = data.salary;
        console.log('CompanyModel constructor is used!');

    }
}

这就是我在组件中使用它们来展示公司的方式

data() {
    return{
       companyModel:{},
    }
},

mounted() {
    CompanyService.getCompany(2)
    .then((response) =>{
        this.companyModel = new CompanyModel(response.data);
    });

},

问题：我需要知道这是否足够好，或者 vuejs 是否有更自然的方式，我不喜欢如何完成来自服务的 axios 请求，我想提取所有请求我无法提供的服务.. 谢谢。

【问题讨论】：

据我所知，如果您不想将数据直接存储在组件中，则可以使用 vuex 存储。你以前研究过 Vuex 吗？您可以将 api 调用抽象为模块操作，CompanyModel 将是模块内的数据。组件将计算属性映射到模块 getter 或状态。
我还没有检查过，但是谢谢我会的，但是我不是不想直接存储数据，而是我在 then((response) =>{}) 中使用的部分组件，但是我想在服务中实现那部分，但是我没能做到，假设我已经能够做到这一点，你认为如果使用 vuex 存储会更好吗？从vue的设计角度来看。
我使用服务来分离关注点并简化测试。这个问题What's the equivalent of Angular Service in VueJS 简洁地定义了选项。至于“完成 axios 请求”，不确定是什么问题 - Promise 是一个有效的返回值。

标签： vue.js model-view-controller service

【解决方案1】：

我在这里写了一个很好的第一个版本：What's the equivalent of Angular Service in VueJS?

然后您可以将其与您的 services 结合起来，以避免一直调用 axios。

【讨论】：

啊，谢谢，这几乎是我想使用的哲学，还有一件事，我已经检查过 vuex，它在提供服务方面做得很好，我想以与 angular 相同的方式工作的原因是不是我可能需要重用一些东西，但我看到 vuex 对 vue 来说更自然，哈哈，所以我认为一个人不可能拥有一切