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

title: useLocale
description: 读取当前区域设置。useLocale 的 API 参考。

---

`useLocale` 组合式函数以只读 Vue ref 的形式返回已安装插件的当前区域设置。该值为区域设置代码，例如 `en` 或 `fr-CA`。

## 概览 [#overview]

Vue 模板会自动解包 ref：

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

const locale = useLocale();
</script>

<template>
  <p>Current locale: {{ locale }}</p>
</template>
```

在脚本中，读取 `locale.value`。

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

* 使用 [`createGT()`](/docs/vue/reference/functions/create-gt) 插件时，区域设置成功更改后，ref 会更新，无需重新加载页面。
* 使用 [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) 返回的插件时，当前页面的区域设置将保持固定。[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) 会保存新的区域设置并重新加载文档，随后会在下一页初始化时提供该设置。
* 在未安装插件的情况下调用该组合式函数会抛出错误。

浏览器的区域设置 cookie 不是响应式事件源。请通过 [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) 更改区域设置，而不要直接写入 `document.cookie`。

## 参数 [#parameters]

`useLocale` 不接受任何参数。

## 返回值 [#returns]

**类型** `Readonly<Ref<string>>`

一个包含当前区域设置的只读 ref。Vue 会在模板中自动解包它；在 JavaScript 和 TypeScript 代码中则使用 `.value`。

```ts
const locale = useLocale();

console.log(locale.value);
```

## 示例 [#example]

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

const locale = useLocale();
const language = computed(() => locale.value.split('-')[0]);
</script>

<template>
  <p>Locale: {{ locale }}</p>
  <p>Language: {{ language }}</p>
</template>
```