目 录CONTENT

文章目录

Vue3 script-setup 异步组件遇到的一个问题!

Hello!你好!我是村望~!
2023-02-03 / 0 评论 / 0 点赞 / 313 阅读 / 335 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

image-1675393420112
今天写Vue3 setup 脚本的时候!遇到了这么一个报错!
大致意思是说:

[Vue warn]:Component<Anonymous>:setup函数返回了一个promise
但在父组件树中找不到<Suspense>边界。具有异步setup()的组件必须嵌套在<Suspense>中才能呈现。

首先因为在 script-setup 模式下,不必再配合 async 就可以直接使用 await 了,这种情况下,组件的 setup 会自动变成 async setup 。
所以我的代码是这样的!

<script setup lang="ts">
...
/**
 * filterParams 列表过滤参数!
 */
const filterParams = ref<MMCP_PWD_LIST>({
  systemName: "",
  companyName: "",
  pageSize: 10,
  pageNum: 1,
  type: "",
  year: "",
});
const data = ref<RootObject["result"]["list"]>([]);

const mmcpList: RootObject = await getMMCP_PWD_LIST(filterParams.value);

当你组件中有 Promise 对象时,即 Axios、Ajax 这类的请求,然后把数据渲染到模板中就会报如下图的错误:
因为这个组件有异步的操作导致页面的变化!那么就需要父组件对变换有边界处理!
所以出现这种情况我们需要包裹 Suspense 组件!才能解决问题!

  <Suspense>
    <router-view></router-view>
  </Suspense>

但是注意,此组件为实验性功能!
image-1675393889260

0

评论区