# vue: useSetLocale
URL: https://generaltranslation.com/ja/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) プラグインの setter は、次の処理を行います。

1. 設定された loader を介して、キャッシュされていない対象カタログを読み込みます。
2. 読み込みが成功すると、設定された cookie に対象ロケールを保存します。
3. ページを再読み込みすることなく、リアクティブなコンシューマーを更新します。

正常に読み込まれたカタログはキャッシュに保持されます。同時リクエストは任意の順序で完了する可能性がありますが、アクティブなロケールを変更できるのは最新のリクエストのみです。そのカタログの読み込みが失敗した場合、Promise は reject され、現在のロケールと cookie は変更されません。

### ブラウザ SPA プラグイン

[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) が返すシングルトンでは、setter は指定されている場合、要求されたロケールを設定済みのロケールリストに照らして解決し、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) プラグインでは、loader が処理可能な任意のコードを使用できます。[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) プラグインに `locales` リストが設定されている場合は、そのロケールと設定済みの alias に照合され、リクエストがサポートされていない場合はデフォルトロケールにフォールバックします。

## 例 [#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 では、呼び出しの一環としてドキュメントの再読み込みが始まります。そのため、対象ロケールがすでに有効であることを前提とする同一ページ内の処理はスケジュールしないでください。