将数据从 api 缓慢获取到 vue 视图的问题答案

【问题标题】：issue with slowly geting data from api to vue view将数据从 api 缓慢获取到 vue 视图的问题
【发布时间】：2019-09-11 19:34:55
【问题描述】：

我遇到了从 laravel api 到 vue 视图的数据非常缓慢的问题，我在我有的地方做了教程：

import axios from 'axios';

const client = axios.create({
    baseURL: '/api',
});

export default {
    all(params) {
        return client.get('users', params);
    },
    find(id) {
        return client.get(`users/${id}`);
    },
    update(id, data) {
        return client.put(`users/${id}`, data);
    },
    delete(id) {
        return client.delete(`users/${id}`);
    },
};

<script>
import api from "../api/users";

export default {
  data() {
    return {
      message: null,
      loaded: false,
      saving: false,
      user: {
        id: null,
        name: "",
        email: ""
      }
    };
  },
  methods: {
    onDelete() {
      this.saving = true;
      api.delete(this.user.id).then(response => {
        this.message = "User Deleted";
        setTimeout(() => this.$router.push({ name: "users.index" }), 1000);
      });
    },
    onSubmit(event) {
      this.saving = true;

      api
        .update(this.user.id, {
          name: this.user.name,
          email: this.user.email
        })
        .then(response => {
          this.message = "User updated";
          setTimeout(() => (this.message = null), 10000);
          this.user = response.data.data;
        })
        .catch(error => {
          console.log(error);
        })
        .then(_ => (this.saving = false));
    }
  },
  created() {
    api.find(this.$route.params.id).then(response => {
      this.loaded = true;
      this.user = response.data.data;
    });
  }
};
</script>

它从 api 加载数据非常缓慢我首先在视图中看到空输入，然后在短时间内我看到数据，如果我从 laravel 打开 api 数据我会立即看到数据，所以我的问题是如何加快速度？还是我做错了什么？

【问题讨论】：

这是否也发生在生产版本中？我在开发模式下也有类似的问题，我想这是 webpack 开发服务器的限制。
不，这是开发模式，我使用 npm run watch 或 npm run dev 或 npm run prod 并且我使用宅基地服务器，当我有宅基地时如何在生产中检查它是否可能？或者也许你知道一些免费或便宜的 laravel 和 vue 服务？我尝试使用 netifly，但它不适用于 laravel

标签： laravel api vue.js

【解决方案1】：

每当我在 Vue 中使用 API 时，我通常会在打开 Vue 之前进行大部分 API 调用，然后像这样传递它。

<vue-component :user="'{!! $user_data !!}'"></vue-component>

但是如果您必须在 Vue 组件中执行此操作，我不确定这是否会比您的方法有所改进，但我会像这样使用“已安装”进行设置。

export default {
    mounted() {
        api.find(this.$route.params.id).then(response => {
          this.loaded = true;
          this.user = response.data.data;
        });
    }
}

还有heres 一个关于 Axios 以及如何在 Vue 中使用 HTTP Requets 的好教程。

希望这回答了你的问题，祝你好运！

【讨论】：