useFetch 和 nuxt i18n 模块的问题

Question

我正在开发 nuxt 3 项目，我对 useFetch 和 nuxt i18n 模块有问题，在我的 default.vue 布局中，我有页脚、导航栏组件，加载网站时还从后端获取数据，但是页面内容在区域设置时发生了变化已更改，但导航栏、页脚数据区域设置未更改，有人使用 nuxt i18n 和 useFetch 吗？

default.vue 中包含导航栏和页脚组件，当语言环境更改时，页面内容会根据所选语言环境进行更改，但导航栏类别和页脚数据不会根据所选语言环境获取，这里有 nuxt 3 专家吗？

Answer 1

您可以观察区域设置变量并显式刷新您需要的任何数据。

const { t, locale } = useI18n();

const data = useFetch("/api/data");

watch(locale, () => {
  data.refresh();
});

Answer 2

nuxt 3 中也有同样的问题。

我的 nav.vue 没有在页眉和页脚组件中热重载，但在页面中成功热重载。

// nav.vue
const banana = [
  {
    id: "1",
    title: t("NAV.HOME"),
    path: "/",
  },
  {
    id: "2",
    title: t("NAV.SERVICE"),
    path: "/service",
  },
  {
    id: "3",
    title: t("NAV.VACCINE"),
    path: "/vaccine",
  },
  {
    id: "4",
    title: t("NAV.ARTICLE"),
    path: "/article",
  },
  {
    id: "5",
    title: t("NAV.ABOUT"),
    path: "/about",
  },
  {
    id: "6",
    title: t("NAV.CONTACT"),
    path: "/contact",
  },
];




// en.js
export default {
  NAV: {
    HOME: "home",
    SERVICE: "service",
    VACCINE: "vaccine",
    ARTICLE: "article",
    ABOUT: "about",
    CONTACT: "contact",
  }
};