Vue 3 中切换语言时重新渲染 OpenWeatherMap 组件

Question

我是 Vue 3 的初学者，为了学习它，我正在使用 OpenWeatherMap API 开发一个简单的天气 Web 应用程序。我使用 vue-i18n 库添加了多语言支持，一切正常。但只有一个问题，OWM API 返回的天气描述语言取决于请求中传递的

lang

参数。因此，即使应用程序语言是完全响应式的，并且当我切换语言时会发生变化，天气描述也不会更新，这是正常的，因为它需要使用正确的

lang

值重新请求 API。但我不知道该怎么做。如何重新渲染该组件以便在 API 返回的描述中获得正确的语言？

下面是我的组件以及相关代码：

<script setup>
import axios from "axios";
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const i18nLocale = useI18n();
const route = useRoute();

const getWeatherData = async () => {
    const langapi = i18nLocale.locale.value.substring(0, 2);

    try {
        const weatherData = await axios.get(`https://api.openweathermap.org/data/3.0/onecall?lat=${route.query.lat}&lon=${route.query.lng}&exclude={part}&appid=${myapikey}&units=metric&lang=${langapi}`);

        // cal current date & time
        const localOffset = new Date().getTimezoneOffset() * 60000;
        const utc = weatherData.data.current.dt * 1000 + localOffset;
        weatherData.data.currentTime =
            utc + 1000 * weatherData.data.timezone_offset;

        // cal hourly weather offset
        weatherData.data.hourly.forEach((hour) => {
            const utc = hour.dt * 1000 + localOffset;
            hour.currentTime =
                utc + 1000 * weatherData.data.timezone_offset;
        });

        await new Promise((res) => setTimeout(res, 500));

        return weatherData.data;
    } catch (error) {
        console.log(error);
    }
}

const weatherData = await getWeatherData();

// ...
</script>

<template>
    // ...
    
        <p class="capitalize">
            {{ weatherData.current.weather[0].description }}
        </p>
        
    // ...
</template>

我想我应该刷新组件，以便使用正确的 lang 参数再次调用 API，或者更简单地重新调用

getWeatherData

函数，但我不知道该怎么做。

Answer 1

Vue 的 watch 功能是专门为处理您遇到的变化而设计的。

假设

locale

变量是一个 ref，您可以添加类似于以下内容的观察者：

watch(() => locale.value, () => {
    getWeatherData();
});