# vue: useSetLocale
URL: https://generaltranslation.com/zh/docs/vue/reference/composables/use-set-locale.mdx
---

title: useSetLocale
description: 更改当前区域设置。useSetLocale 的 API 参考。

---

`useSetLocale` 组合式函数会返回已安装插件提供的异步区域设置函数。其加载和导航行为取决于该插件的创建方式。

## 概述 [#overview]

使用目标区域设置作为参数调用返回的函数：

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

const setLocale = useSetLocale();
</script>

<template>
  <button @click="setLocale('fr')">Français</button>
</template>
```

使用 [`useLocale()`](/docs/vue/reference/composables/use-locale) 获取当前区域设置。

## 工作原理 [#how-it-works]

### 响应式插件

对于 [`createGT()`](/docs/vue/reference/functions/create-gt) 插件，其区域设置函数：

1. 通过已配置的加载器加载未缓存的目标目录。
2. 加载成功后，将目标区域设置保存到已配置的 cookie 中。
3. 无需重新加载页面，即可更新响应式使用方。

成功加载的目录会保留在缓存中。并发请求可按任意顺序完成，但只有最新请求会更改当前区域设置。如果该请求的目录加载失败，则 Promise 会被拒绝，当前区域设置和 cookie 均保持不变。

### 浏览器 SPA 插件

对于 [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) 返回的单例，其区域设置函数会在提供了已配置的区域设置列表时，依据该列表解析请求的区域设置、写入 cookie，并重新加载文档。它不会在当前页面加载目标目录；该页面的区域设置会保持固定，直到重新加载。重新加载后，模块级 [`t()`](/docs/vue/reference/functions/t) 调用会在新目录预加载完成后再次执行。

## 参数 [#parameters]

`useSetLocale` 不接受任何参数。

## 返回值 [#returns]

**类型** `(locale: string) => Promise<void>`

一个接受以下参数的异步设置函数：

| 参数                  | 描述        | 类型       | 可选 | 默认值 |
| ------------------- | --------- | -------- | -- | --- |
| [`locale`](#locale) | 目标区域设置代码。 | `string` | 否  | —   |

### `locale`

**类型** `string` · **必填**

目标区域设置代码。响应式 [`createGT()`](/docs/vue/reference/functions/create-gt) 插件接受其加载器可处理的任何代码。当 [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) 插件配置了 `locales` 列表时，它会匹配其中的区域设置及已配置的别名；如果请求不受支持，则回退到默认区域设置。

## 示例 [#example]

如果后续代码依赖新的区域设置，请等待响应式变更：

```vue title="LocaleSelect.vue"
<script setup lang="ts">
import { useLocale, useSetLocale } from 'gt-vue';

const locale = useLocale();
const setLocale = useSetLocale();

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  await setLocale(target.value);
}
</script>

<template>
  <select :value="locale" @change="changeLocale">
    <option value="en">English</option>
    <option value="fr">Français</option>
    <option value="ja">日本語</option>
  </select>
</template>
```

在使用 [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) 初始化的 SPA 中，调用该函数时会开始重新加载文档。因此，请勿安排任何假定目标区域设置已生效的同页任务。