Vue implémente le changement de langue

Dans le développement de sites Web multilingues, le changement de langue est une fonction très importante. En tant que framework frontal moderne, Vue peut naturellement implémenter des fonctions de changement de langage. Dans cet article, nous présenterons comment utiliser Vue pour implémenter le changement de langue.

1. Le principe du changement de langue

Pour mettre en œuvre le changement de langue sur le site Web, nous devons effectuer les étapes suivantes :

1. Créer des fichiers de ressources linguistiques et enregistrer le texte dans différentes langues dans différents fichiers ; type de langue actuel Enregistrer dans le stockage local ;
2. Dans le modèle de Vue, utilisez le fichier de ressources de langue correspondant pour remplacer le texte original.
3. 2. Implémenter le changement de langue

Créer des fichiers de ressources de langue

1. Créez un répertoire lang dans le répertoire /src pour stocker les fichiers de ressources de langue. Le fichier de ressources linguistiques peut être un fichier au format JSON ou un fichier au format JS. Dans cet article, nous utilisons des fichiers au format JSON.

Dans le répertoire lang, créez un fichier zh-cn.json pour stocker les ressources de texte chinois. Le contenu est le suivant :

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

Créez ensuite un fichier en-us.json dans le répertoire lang pour stocker les ressources de texte en anglais. Le contenu est le suivant :

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

Enregistrez le type de langue actuel

2. Dans la boutique Vuex, nous pouvons utiliser localStorage pour enregistrer le type de langue actuel. Dans le fichier store.js, ajoutez le code suivant :

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)
    },
  },
})

Remplacer le texte dans le modèle

3. Dans le modèle du composant Vue, on peut utiliser la fonction $vuetify.lang.get pour obtenir la ressource texte correspondante. $vuetify.lang est un objet fourni par Vuetify pour obtenir des ressources texte. Dans cet article, nous utiliserons Vuetify comme framework d'interface utilisateur pour Vue.

<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>

Implémentation de la fonction de changement de langue

4. Dans le composant Vue, nous devons définir une fonction pour changer de langue. Dans cet article, nous basculerons entre le chinois et l'anglais, qui peuvent être développés en fonction des besoins réels.

<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>

Il est à noter que nous devons définir la valeur de $vuetify.lang.current sur la langue actuelle afin d'obtenir les ressources texte correspondantes ultérieurement.

3. Code complet

<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. Résumé

Dans cet article, nous avons présenté la méthode d'utilisation de Vue pour implémenter le changement de langue. Lors de la mise en œuvre du changement de langue, nous devons créer des fichiers de ressources linguistiques, enregistrer le type de langue actuel et remplacer le texte dans le modèle. Dans la fonction qui implémente le changement de langue, nous devons définir la valeur de $vuetify.lang.current sur la langue actuelle afin de pouvoir obtenir les ressources texte correspondantes ultérieurement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!