如何仅在 VueJS 中的 API 初始加载后观看？

Question

我从 API 获取数据，我用这些数据在我的组件中填充表单。我只需要在初始填充数据后触发观察者。就像以异步方式一样。但是观察者会立即被触发。只有在初始填充数据后更改了任何值时，我才需要禁用更新按钮。

<template>
  <div id="app">
    <input type="text" v-model="user.userId" /> <br />
    <br />
    <input type="text" v-model="user.title" /> <br />
    <br />
    <button :disabled="isDisabled">Update</button>
  </div>
</template>

<script>
export default {
  name: "App",
  watch: {
    user: {
      handler(oldVal, newVal) {
        if (oldVal != newVal) {
          this.isLoaded = false;
        }
      },
      deep: true,
    },
  },
  computed: {
    isDisabled() {
      return this.isLoaded;
    },
  },
  async created() {
    await fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        this.user = json;
        this.isLoaded = true;
      });
  },
  data() {
    return {
      user: {
        userId: 0,
        id: 0,
        title: "",
        completed: false,
      },
      isLoaded: true,
    };
  },
};
</script>

我已经推荐了Vue, await for Watch 和Are watches asynchronous? 和Vue.js How to watcher before mounted() , can't get data from watch，但我无法关注。

这是一个预览：https://codesandbox.io/embed/great-euler-skd3v?fontsize=14&hidenavigation=1&theme=dark

Answer 1

问题的最简单答案：

Q：如何在VueJS中从API初始化加载后才观看？

答：在watch 中添加标志（例如isLoaded）。

您的代码也有一些问题：

• async/await in created 什么都不做，
• 不需要isDisabled，因为它仅基于来自data 的1 个值。您可以改用此值 (isLoading)。
• 如果您的 api 调用失败，isLoading 标志将不会改变，更好的方法是将其移至 finally。

您的问题的解决方案（codesandbox）：

<template>
  <div id="app">
    <div v-if="!isFetching">
      <input type="text" v-model="user.userId" /> <br />
      <br />
      <input type="text" v-model="user.title" /> <br />
      <br />
      <button :disabled="!isLoaded">Update</button>
    </div>
    <div v-else>Loading...</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        userId: 0,
        id: 0,
        title: "",
        completed: false,
      },
      isFetching: false,
      isLoaded: false
    };
  },
  watch: {
    user: {
      handler(oldVal, newVal) {
        if (!this.isFetching) {
          // this comparision doesn't work (cause oldVal/newVal is an object)
          if (oldVal != newVal) {
            this.isLoaded = false;
          }
        }
      },
      deep: true
    },
  },
  created() {
    this.isFetching = true;
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        this.user = json;
        this.isLoaded = true;
      })
      .finally(() => this.isFetching = false)
  },
};
</script>

Answer 2

这需要通过一些条件来确定。

isLoaded 已经用于确定初始加载的状态，但名称令人困惑，因为它确定数据未加载。

可以是：

  watch: {
    user: {
      if (this.isLoading && oldVal != newVal) {
        this.isLoading = false;
      }
      ...

观察者不需要是deep，并且在不需要时可以不被观察：

async created() {
  let unwatchUser = this.$watch('user', (oldVal, newVal) => {
    if (this.isLoading && oldVal != newVal) {
      this.isLoading = false;
      unwatchUser();
    }
  })
  ...

指定尚未加载数据的常用方法是将其设置为null，即没有值。这不需要isLoading 标志或观察者。如果 null 由于引用的对象属性而不受欢迎，则可以通过可选的链接和条件渲染来克服：

  <div v-if="user">
      <input type="text" v-model="user.userId" />
      ...
  <div v-else class="spinner"/>