javascript - 为什么我的第一个加载数据 axios 是 return 404 Vue Js？

Question

伙计们，我已经尝试获取数据并将其显示在我的组件中。但问题是，获取数据时出现 404 或第一次加载时数据未显示。但是当我再次尝试重新加载时，数据会按应有的方式显示。还有一件事.. 数据成功上传到服务器，甚至响应状态 404 正如我所说

顺便说一下，这是我的 component.js

getApi() {
  return api.get("/routeName")
}

这是我的商店

async fetchApi({ commit }) {
  try {
    let {
      data: { data }
    } = await component.getApi()
    commit("SET_API", data)
  } catch (error) {
    return Promise.reject(error)
  }
}

这就是我从组件内的商店调用 fetchApi 的方式

async created() {
  await this.getApi()
}

methods: {
  async getDraft() {
    try {
      await this.$store.dispatch("component/fetchApi")
      this.scrollToTop()
    } catch (error) {
      error
    }
  }
}

Answer 1

我假设您访问 <template> 中的 VUEX 状态数据标签(我无法评论以获取更多信息。)

如果我是对的，问题是当您访问时数据为空时，组件不会观察 VUEX 状态。

如果您在 VUEX 状态数据为 null 时渲染，当您在您的存储中调用 fetchDraft 时数据更新。在组件中不跟踪你的 VUEX。我不知道为什么它会发生在低级别。

在我的例子中，我需要使用 setInterval 将 Vuex 状态加载到组件中的本地数据。并使用它而不是直接访问 vuex。

例如

created() {
  this.intervalUpdate = setInterval(() => {
      this.updateData();
    }, 1000);
},

destroyed() {
  clearInterval(this.intervalUpdate);
},

methods: {
  async updateData() {
    this.draftData = await this.$store.dispatch("review/fetchDraft");
  }
}

这不是最好的解决方案。但它帮助我解决了那个组件的问题