vue.js - vue 最佳实践 api 处理

Question

一直在阅读文档并在谷歌上搜索最佳实践，以在没有运气的情况下处理更大项目中的 api 调用(或者至少不是我正在寻找的东西)。

我想为后端创建一个服务/外观，我可以在每个需要它的组件中加载它。例如。

我想在服务中获取天气的历史数据，因此在我需要的每个组件中，我都可以加载天气服务并使用 getter 来获取所需的数据。我想以下面的内容结束。但我不想让它工作。所以我想知道，vue.js 中对此的最佳实践是什么？

import WeatherFacade from './data/WeatherFacade.vue'

export default {
  name: 'Chart',
  created () {
    console.log(WeatherFacade.getWeather())
  },
  components: {
    WeatherFacade 
  }
}

附言。使用 vue 2.1.10

Answer 1

这可以通过创建一些外部对象来轻松完成，这些对象将保存这些数据和模块捆绑。我通常在我的项目中做的是创建 services 目录并将它们按我想要的顺序分组。

让我们分解一下 - services/WeatherFascade.js(使用 VueResource)

import Vue from 'vue'

export default {
  getWeather() {
    return Vue.http.get('api/weather')
  }
}

如果你必须传递一些动态数据，比如ID，把它作为参数传递

import Vue from 'vue'

export default {
  getWeather(id) {
    return Vue.http.get(`api/weather/${id}`)
  }
}

然后在您的组件中，您可以导入此服务、传递参数(如果有)并取回数据。

import WeatherFascade from '../services/WeatherFascade'

export default {
  data() {
    return {
      weatherItems: []
    }
  },
  created() {
    this.getWeatherData()
  },
  methods: {
    getWeatherData() {
      WeatherFascade.getWather(// you can pass params here)
       .then(response => this.weatherItems = response.data)
       .catch(error => console.log(error))
    }
  }
}

您可以使用任何您喜欢的库，例如 axios 很酷。