由于异步不匹配，重新加载页面时 Vue 反应性未触发？

Question

我正在使用选项 API 构建一个简单的 SPA，并使用最简单的状态管理：只需从 store.ts 文件导出 Ref。通过向 API 发出获取请求，在BeforeMount 上填充此 Ref。我有一个带有编辑表单的子路由，该表单预填充了从 api 获取的数据。到目前为止一切顺利，数据按预期加载，但是如果我重新加载页面，模型绑定将不会更新视图，并且表单字段将为空。

我检查了 Vue DevTools，可以看到我的状态 Ref 在重新加载后已正确设置，因此我假设我的异步函数解析时间与反应性 api 之间存在一些不匹配。我尝试在不同的地方使用 nextTick 但它不起作用。

请参阅下面的部分代码：

路由器/index.ts

routes: [
    {
        path: "/users/:id",
        name: "users_view",
        component: UserView,
        props: true,
        children: [
            {
                path: "edit",
                name: "edit_user",
                component: UserForm,
                props: true
            }
        ]
    }
]

store.ts

export const current_user: Ref<User | undefined> = ref(undefined);

视图/UserView.vue

<script setup lang="ts">
// ...I'm ommiting the other imports here, not relevant
import { current_user } from "@/store";

type Props = {
    id: string;
};

const props = defineProps<Props>();

onBeforeMount(() => {
    // Fetching user from the api
    new CaseResource().find(props.id).then(user => {
        current_user.value = user
    })
});
</script>

<template>
    <RouterView />
</template>

视图/UserForm.vue

<script setup lang="ts">
// ...I'm ommiting the other imports here, not relevant
import { current_user } from "@/store";

const model = ref({});

onBeforeMount(() => {
   if (current_user) {
       model.value = { ...current_user.value };
   }
});
</script>

<template>
    <form>
        <input ... v-model="model.foo">
        <input ... v-model="model.bar">
        ...
    </form>
</template>

Answer 1

显然是副作用，应该注意变化，watchEffect做到了。