可以进行顶级（App.vue）异步设置吗？答案

【问题标题】：Possible for top level (App.vue) async setup?可以进行顶级（App.vue）异步设置吗？
【发布时间】：2022-07-09 04:28:09
【问题描述】：

是否可以在 App.vue 顶层组件中使用await？

每当我尝试使用它时，应用程序什么都不显示？

<template>
    <Suspense>
        <template #default>
            <div>Hello</div>
        </template>
        <template #fallback>
            <div>Loading...</div>
        </template>
    </Suspense>
</template>

<script lang="ts">
import { defineComponent, onErrorCaptured, ref, Ref } from 'vue';
export default defineComponent({
    name: 'App',
    components: {},
    async setup() {
        console.log('async setup - App.vue');

        const error: Ref<undefined | Error> = ref(undefined);
        onErrorCaptured((e) => {
            error.value = e;
            return true;
        });
        if (error.value) return { error };

        return {};
    }
});
</script>

<style lang="scss">
</style>

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

当setup() 为async 时，组件本身就变成了一个异步组件。然后必须在父组件中的<suspense> 中呈现该组件。 <suspense> 不应该在异步组件自己的模板中，除非它有自己的异步组件子级。

<!-- Parent.vue -->
<template>
  <Suspense>
    <template #default>
      <MyAsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<!-- MyAsynComponent.vue -->
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  async setup() {
    ⋮
  }
})
</script>

如果您不打算使组件异步，并且您只有在 setup() 中运行 async 代码，您应该将该代码包装在其自己的 async 块中（例如，在 async 函数中）。例如，通常在挂载组件时获取数据，因此您可以使用async 回调到await 获取调用：

<!-- MyAsyncComponent -->
<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  setup() {
    const getPosts = async () => axios.get(⋯)
    const posts = ref([])

    onMounted(async () => {
      posts.value = await getPosts()
    })

    return { posts }
  }
})
</script>

【讨论】：

【解决方案2】：

从您提供的内容来看，我不明白您的应用组件的 async 是什么，但我会与您分享我所做的，以满足我的特殊需要。

我有一个应用程序设置模块，它公开了“加载应用程序设置”功能。我希望 appSettings 的这个对象为以下内容保存状态：“侧边菜单是打开还是关闭？” 我的模块还包括 2 个功能，一个用于提供 getter 和设置，另一个用于注入。我猜这就像一个没有商店的商店。

因此，为了在创建该应用程序之前加载数据（来自 IndexedDB），我修改了 main.js，如下所示：

import { createApp } from 'vue'
import { loadApplicationSettings } from '@/composables/useApplicationSettings';
    loadApplicationSettings()
        .then((as) => {
            const app = createApp(App)
            app.mount('#app')
        });

现在我已经将一些数据加载到我的模块中，我现在可以在 App.vue 中使用它，而无需 async App.vue，因为该数据现在存储在模块中。

<script setup lang="ts">
import { initApplicationSettings } from '@/composables/useApplicationSettings';
initApplicationSettings();
</script>

所以基本上，为了克服“App.vue 不能做 asnyc”，我只需在使用 createApp

之前准备好一切

希望这会有所帮助。

【讨论】：