Question

一直在阅读文档并搜索最佳实践，以便在没有运气的情况下处理大型项目中的api调用（或者不是我正在搜索的内容）。

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

我想获取服务中天气的历史数据，因此在我需要的每个组件中，我只需加载天气预报并使用getter来获取所需数据。我想最终得到类似下面的内容。但是我想让它发挥作用。所以我想知道，在vue.js中最好的做法是什么？

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    MyAdapter adapter = new MyAdapter(this);
    recyclerView.setAdapter(adapter);
    adapter.buildModels();

PS。使用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很酷。

vue bestpractice api处理

1 个答案: