Vue2 Composition Api - 如何从 api 获取数据？

Question

我正在使用 Vue2.6 和组合 api。我需要根据 api 响应重新路由到不同的页面。有人可以指导我吗？

我尝试使用 onBeforeMount，但它会呈现 UI 元素，然后将其重新路由到 api 响应的相应页面。所以我可以看到错误 UI 的闪光。 .

setup() {
  const myData = 'myData';

  onBeforeMount(async () => {
    try {
        const results = await fetchData();
        // do reroute depends on results response
      }
    } catch (err) {
      console.log(err);
    }
  });

  return {
    myData,
  };

我也尝试在设置方法中添加异步，但它错误地指出我的引用变量“属性或方法“myData”未在实例上定义，但在渲染期间被引用。”

async setup() {
  const myData = 'myData';

  onMounted(async () => {
    try {
        const results = await fetchData();
        // do reroute depends on results response
      }
    } catch (err) {
      console.log(err);
    }
  });

  return {
    myData,
  };

Answer 1

您似乎在尝试从组件内部动态处理路由 (re-routing)。我看不到其余的应用程序，因此无法说明此类解决方案的有效性，但希望您能劝阻您这样做。 IMO，路由逻辑不应该在组件中处理。这些组件应该主要只处理模板和用户交互。当您渲染组件时，API 应该已经解决了。

我建议在路由之前解决 API 响应甚至完成。您或在路由执行期间使用 navigationGuard 来解析 API。此功能是异步的，因此您可以在继续之前等待响应。

或者，如果你真的想在组件中处理它，你会在 API 解析时有延迟，但你可以实现一些加载器动画来改善体验。

Vue2 Composition Api - 如何从 api 获取数据？

Vue2 Composition Api - How do I fetch data from api?

vuejs2

vuejs3

vue-composition-api