Vue 3 Composition API 中从 RefImpl 获取值的最佳实践：如何解决 Infinity 问题？

2024-03-17 01:05:52

在 Vue 3 Composition API 中从 RefImpl 获取值的最佳实践

问题

在 Vue 3 Composition API 中使用 @vueuse/core 的 useGeolocation 函数时，经常遇到这样一个问题：在 onMounted 生命周期钩子中获取用户位置信息时，经度和纬度坐标返回的是无穷大 (Infinity)。

原因分析

这种情况通常是因为在调用 useGeolocation 时，用户的位置信息尚未获取到。在 onMounted 生命周期钩子执行时，用户的位置信息可能仍然不可用，导致 coords.value 返回 undefined。

解决方案：利用 resume 方法

为了解决这个问题，可以使用 resume 方法显式地重新启动位置跟踪。resume 方法会重新开始获取用户位置，并在位置信息更新时触发 coords 响应式对象。

步骤指南

要在 Vue 3 Composition API 中从 RefImpl 正确获取值，请遵循以下步骤：

在 onMounted 生命周期钩子中调用 resume 方法。
在调用 resume 方法后，使用 coords.value 来获取用户位置信息。

示例代码

<script setup>
import { onBeforeMount, onMounted, ref } from "vue";
import { useGeolocation } from "@vueuse/core";

const { coords, locatedAt, error, resume, pause } = useGeolocation();

const form = ref({
    coords: null,
});

onMounted(() => {
    resume(); // 重新启动位置跟踪
    form.value.coords = {
        latitude: coords.value.latitude,
        longitude: coords.value.longitude,
    };
    console.log(coords);
});
</script>