vue-i18n國際化在data中切換不起做用

vue-i18n是一個針對於vue的國際化插件，使用很是簡單，具體使用方式看我細細道來。

實現方式

1. 下載包

npm install vue-i18n

2. 配置

在main.js文件中加入以下配置

// 引入插件和語言包
import VueI18n from 'vue-i18n' import zh from '@/i18n/langs/zh' import en from '@/i18n/langs/en' Vue.use(VueI18n) //實例化vue-i18n
const i18n = new VueI18n({ // 從本地存儲中取，若是沒有默認爲中文， // 這樣能夠解決切換語言後，沒記住選擇的語言，刷新頁面後仍是默認的語言
  locale: localStorage.getItem('lang') || 'zh', messages: { 'zh': zh, // 中文語言包
    'en': en // 英文語言包
 } }) // 將i18n實例掛載到vue上
new Vue({ el: '#app', i18n, router, store, template: '<App/>', components: { App } })

3. 建立中、英文包文件

建立兩個文件，一個爲zh.js表明中文，en.js表明英文，具體內容格式以下

//zh.js
export default { nav: { home: '首頁', monitor: '監控', analyze: '分析', alarm: '報警', maintenance: '運維', config: '配置', device: '設備', scada: '畫面' }, confirm: { ok: '確認', cancel: '取消', content: '你確認要退出系統嗎？', logout: '退 出' }, }

//en.js
export default { nav: { home: 'Home', //首頁
    monitor: 'Monitor', //監控
    analyze: 'Analyze', //分析
    alarm: 'Alarm', // 報警
    maintenance: 'Maintenance', //運維
    config: 'Config', //配置
    device: 'Device', //設備
    scada: 'Scada' //畫面
 }, confirm: { ok: 'Logout', //退出
    cancel: 'Cancel', //取消
    content: 'Are you sure you want to quit the system?', //你確認要退出系統嗎
    logout: 'Logout' //  } }

4. 在組件中使用

咱們先看vue-i18n的模板語法

//第一種
<span v-text="$t('nav.home')"></span>

//第二種
<span>{{$t('nav.home')}}</span>

5. 如何切換中英文

關於這點，vue-i18n給咱們提供了一個全局變量locale，經過他咱們能夠查看當前使用的語言，也能夠經過他改變當前使用的語言；

具體用法：

// 查看當前使用的語言
console.log(this.$i18n.locale) // 改變當前使用的語言
this.$i18n.locale = 'en'  // 將當前使用的語言切換到英文

通常在項目中，咱們會使用以下方式切換語言

// 切換語言按鈕
<v-list-tile  @click="onChangeLang">
  <v-list-tile-title>中文 / EN</v-list-tile-title>
</v-list-tile>
<v-list-tile  @click="onLogOutClick">
  <v-list-tile-title >{{$t('confirm.logout')}}</v-list-tile-title>
</v-list-tile>


// 切換方法onChangeLang的處理, 這裏的彈出框是element-ui的組件
onChangeLang() { this.$confirm(this.$t('changeLang.content'), this.$t('changeLang.tip'), { confirmButtonText: this.$t('changeLang.ok'), cancelButtonText: this.$t('confirm.cancel'), type: 'warning' }) .then(() => { let lang = this.$i18n.locale if (lang === 'zh') { this.$i18n.locale = 'en'
        // 對應main.js配置文件中的localStorage的get方法
        localStorage.setItem('lang', this.lang) } else { this.$i18n.locale = 'zh' localStorage.setItem('lang', this.lang) } }) .catch(() => {}) }

可能會遇到的問題

1. 記不住切換後的語言

就是咱們切換語言後，刷新又是默認語言，這點咱們在上面已經用本地存儲localStorage解決了；

2. 將this.$t() 寫到了data屬性裏，切換語言不起做用

data是一次性生產的，你這麼寫只能是在 data 初始化的時候拿到這些被國際化的值，並不能響應變化。

官方的解決辦法是，建議咱們將表達式寫到computed屬性裏，不要寫到data裏

3. 後臺獲取過來的動態數據，在切換國際語言後不起做用

在witch中監聽 i18n語言變化，從新調取接口。

 

 

4. 注意拷貝後數組中的數據，在切換國際化時無論用，由於淺複製只拷貝了以前沒變的數據。

部份內容摘自：做者：LeonWuV 
來源：CSDN 
https://blog.csdn.net/wxl1555/article/details/85112530