在vue 3组合API中热处理异步道具

Question

母公司：

const { getGroup, removePubli, removeTablet, loadTotal, error } = useGroups();

const group = ref({});

getGroup(group_id).then((g) => {
  group.value = g;
});

儿童部分：

const { group } = defineProps({
  group: {
    type: Object,
    default: {},
  },
});

考虑到上面的支持(它是由异步axios调用获取的)，当我尝试将其用于chield组件时，它是未定义的或承诺的。

我已经尝试过在onMounted钩子中放一个异步，但是它不起作用。

getGroup会这样做：

const getGroup = async (id) => {
  const r = await api.get(`/api/v1/groups/${id}`);
  if (r?.status !== 200) error.value = "Falhou";
  return r.data;
};

我希望在代码继续之前等待它，或者在承诺自行解决时找到一种方法来做一些事情。

Answer 1

我在您的代码中没有看到任何await。使用等待而不是.then！

<script setup>
const { getGroup, removePubli, removeTablet, loadTotal, error } = useGroups();

const group = ref({})

const result = await getGroup(someId)

group.value = result.data // or what ever
</script>