Vue は言語切り替えを実装します-フロントエンドQ&A-php.cn

Vue は言語切り替えを実装します

WBOY

リリース： 2023-05-11 11:04:37

オリジナル

2068 人が閲覧しました

多言語 Web サイト開発では、言語の切り替えは非常に重要な機能です。最新のフロントエンドフレームワークとして、Vue は言語切り替え機能を自然に実装できます。この記事では、Vueを使って言語切り替えを実装する方法を紹介します。

1. 言語切り替えの原理

Web サイトで言語切り替えを実装するには、次の手順を実行する必要があります:

言語リソースファイルを作成し、変換する別の言語のテキスト別のファイルに保存;
現在の言語タイプをローカルストレージに保存;
Vue テンプレートで、対応する言語リソースファイルを使用して元のテキストを置き換えます。

2. 言語切り替えの実装

言語リソースファイルの作成

/src ディレクトリに言語リソースを保存する lang ディレクトリを作成します。。言語リソースファイルには、JSON 形式のファイルまたは JS 形式のファイルを使用できます。この記事ではJSON形式のファイルを使用します。

lang ディレクトリに、中国語テキストリソースを保存する zh-cn.json ファイルを作成します。内容は次のとおりです。

{
  "welcome": "欢迎使用Vue",
  "description": "这是一个演示Vue实现语言切换的例子",
  "button_text": "切换语言"
}

ログイン後にコピー

次に、英語のテキストリソースを保存するために、lang ディレクトリに en-us.json ファイルを作成します。内容は次のとおりです。

{
  "welcome": "Welcome to Vue",
  "description": "This is an example of implementing language switch with Vue",
  "button_text": "Switch Language"
}

ログイン後にコピー

現在の言語タイプを保存する

Vuex ストアでは、localStorage を使用して現在の言語タイプを保存できます。 store.js ファイルに、次のコードを追加します。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    language: localStorage.getItem('language') || 'zh-cn', // 默认为中文
  },
  mutations: {
    // 切换语言类型
    switchLanguage(state, language) {
      state.language = language
      localStorage.setItem('language', language)
    },
  },
})

ログイン後にコピー

テンプレート内のテキストを置換

Vue コンポーネントのテンプレートでは、$vuetify を使用できます。 lang.get 関数を使用して、対応するテキストリソースを取得します。 $vuetify.lang は、テキストリソースを取得するために Vuetify によって提供されるオブジェクトです。この記事では、Vue の UI フレームワークとして Vuetify を使用します。

<template>
  <div>
    <h1>{{ $vuetify.lang.t('welcome') }}</h1>
    <p>{{ $vuetify.lang.t('description') }}</p>
    <v-btn @click="toggleLanguage()">{{ $vuetify.lang.t('button_text') }}</v-btn>
  </div>
</template>

ログイン後にコピー

言語切り替えを実装する関数

Vue コンポーネントでは、言語を切り替える関数を定義する必要があります。この記事では、実際のニーズに応じて拡張できる中国語と英語を切り替えます。

<script>
export default {
  methods: {
    // 切换语言
    toggleLanguage() {
      const language = this.$store.state.language === 'zh-cn' ? 'en-us' : 'zh-cn'
      this.$store.commit('switchLanguage', language)
      this.$vuetify.lang.current = language
    },
  },
}
</script>

ログイン後にコピー

後で対応するテキストリソースを取得できるように、$vuetify.lang.current の値を現在の言語に設定する必要があることに注意してください。

3. 完全なコード

<template>
  <div>
    <h1>{{ $vuetify.lang.t('welcome') }}</h1>
    <p>{{ $vuetify.lang.t('description') }}</p>
    <v-btn @click="toggleLanguage()">{{ $vuetify.lang.t('button_text') }}</v-btn>
  </div>
</template>

<script>
export default {
  methods: {
    // 切换语言
    toggleLanguage() {
      const language = this.$store.state.language === 'zh-cn' ? 'en-us' : 'zh-cn'
      this.$store.commit('switchLanguage', language)
      this.$vuetify.lang.current = language
    },
  },
}
</script>

ログイン後にコピー

4. 概要

この記事では、Vue を使用して言語切り替えを実装する方法を紹介します。言語切り替えを実装するときは、言語リソースファイルを作成し、現在の言語タイプを保存し、テンプレート内のテキストを置き換える必要があります。言語切り替えを実装する関数では、後で対応するテキストリソースを取得できるように、$vuetify.lang.current の値を現在の言語に設定する必要があります。

以上がVue は言語切り替えを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。