# vue: 管理区域设置
URL: https://generaltranslation.com/zh/docs/vue/guides/managing-locales.mdx
---

title: 管理区域设置
description: 如何声明 Vue 区域设置、构建语言切换器，以及控制响应式或通过重新加载进行的切换。
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/translating-content

---

`en-US` 和 `fr` 等区域设置代码会将用户的语言选择映射到相应的 目录 和格式化规则。配置源区域设置和目标区域设置，然后在 Vue 组件中使用区域设置组合式函数。

## 声明可用的区域设置 [#declare]

在 `gt.config.json` 中设置源区域设置和目标区域设置：

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

`defaultLocale` 是源内容的语言。`locales` 列出了 CLI 应生成的语言。

将 `defaultLocale` 传入 [`createGT()`](/docs/vue/reference/functions/create-gt)。保留供语言切换器使用的目标语言列表：

```ts
const gt = createGT({
  defaultLocale: gtConfig.defaultLocale,
  loadTranslations,
});

const availableLocales = [gtConfig.defaultLocale, ...gtConfig.locales];
```

使用 [`createGT()`](/docs/vue/reference/functions/create-gt) 创建的插件不会将区域设置代码限制在此列表中。界面中仅提供受支持的值，并让加载器返回空目录，或明确拒绝不受支持的请求。

## 读取当前区域设置 [#read]

[`useLocale()`](/docs/vue/reference/composables/use-locale) 返回一个只读的 Vue ref。模板会自动解包它：

```vue
<script setup lang="ts">
import { watch } from 'vue';
import { useLocale } from 'gt-vue';

const locale = useLocale();

watch(locale, (nextLocale) => {
  document.documentElement.lang = nextLocale;
});
</script>

<template>
  <p>当前区域设置：{{ locale }}</p>
</template>
```

在普通脚本表达式中读取 `locale.value`。读取该 ref 的组件、计算值和渲染效果会在响应式区域设置切换完成后更新。

## 构建语言切换器 [#switcher]

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) 返回一个异步区域设置函数。请等待其完成，以便界面能够显示加载中的状态或处理失败情况：

```vue title="src/components/LocaleSwitcher.vue"
<script setup lang="ts">
import { ref } from 'vue';
import { useLocale, useSetLocale } from 'gt-vue';

const props = defineProps<{ locales: readonly string[] }>();
const locale = useLocale();
const setLocale = useSetLocale();
const changing = ref(false);

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  changing.value = true;

  try {
    await setLocale(target.value);
  } finally {
    changing.value = false;
  }
}
</script>

<template>
  <select :value="locale" :disabled="changing" @change="changeLocale">
    <option v-for="code in props.locales" :key="code" :value="code">
      {{ code }}
    </option>
  </select>
</template>
```

使用 [`createGT()`](/docs/vue/reference/functions/create-gt) 插件时，区域设置函数会先加载未缓存的目录，再更改区域设置。加载成功的结果会被缓存。如果多个请求重叠，只有最新的请求会更改当前区域设置。

空目录也算加载成功：区域设置会更改，并将源内容作为后备内容渲染。加载器被拒绝时，当前区域设置及其 cookie 保持不变。

## 持久化区域设置 [#persistence]

在浏览器中，当前区域设置会存储在名为 `generaltranslation.locale`、适用于整个路径范围的会话 cookie 中。当 [`createGT()`](/docs/vue/reference/functions/create-gt) 未指定 `locale` 时，该 cookie 的优先级高于 `defaultLocale`。

如果应用需要与路由器或服务器端共用其他 cookie，请设置 `localeCookieName`：

```ts
createGT({
  defaultLocale: 'en',
  localeCookieName: 'my-app.locale',
  loadTranslations,
});
```

请使用 [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale)，不要直接写入 cookie。浏览器不会在 cookie 变更时触发响应式事件，因此外部写入本身不会触发 Vue 重新渲染。

## 选择响应式或基于重新加载的切换方式 [#runtime-mode]

初始化模式决定 cookie 变更后的行为：

* [`createGT()`](/docs/vue/reference/functions/create-gt) 会加载 目录 并更新响应式使用方，无需重新加载页面。
* [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) 会写入 cookie 并重新加载页面，以便预加载新的区域设置后重新执行模块级 [`t()`](/docs/vue/reference/functions/t) 调用。

SPA 初始化器接受 `locales`；如果保存的或请求的区域设置不受支持，则会回退到 `defaultLocale`。如果模块级翻译需要这种行为，请参阅[使用 SPA 翻译进行开发](/docs/vue/guides/developing-spa-translations)。

对于服务器端渲染，请在服务器端解析请求区域设置，并将其显式传递给 [`createGT()`](/docs/vue/reference/functions/create-gt)。该显式值会覆盖过期的浏览器 cookie，使服务器端渲染和 hydration 使用一致的区域设置。
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/storing-translations
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/translating-content