昨日與各位介紹了 vue-i18n 的模式
那今日我們來看看該如何呈現在網頁上且可以自由切換語系吧！

vue-i18n 切換語系

首先我們需要先打開我們 locales 資料夾下的 en.json 檔：

{
  "message": "hello i18n !!"
}

打開後會看到只有以上三行的程式碼
我們可以在最外層的大括弧 {} 中放入需要翻譯的 key 和 value：

{
    "base": {
        "home": "home page",
        "add": "Add",
        "edit": "edit",
        "delete": "Delete",
        "status": "Status",
        "save": "Save",
        "search": "search",
        "cancel": "Cancel"
    }
}

要注意的是，此檔案是用來存放美/英文語系的。
接下來一樣在 locales 資料夾下在新增一個格式為 .json 的檔案，用來存放中文語系：

接著一樣在此檔案中輸入我們需要翻譯的 key 與 vaule，但要注意的是，請勿改變 key 值，而 vaule 的內容則改為該語系的翻譯：

{
    "base": {
        "home": "首頁",
        "add": "新增",
        "edit": "編輯",
        "delete": "刪除",
        "status": "狀態",
        "save": "儲存",
        "search": "搜尋",
        "cancel": "取消"
    }
}

接著我們需要依賴 VueX 的狀態去儲存所選的語系，我們至 src/store/index.js 檔中：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    lang: null
  },
  mutations: {
    setLang (state, value) {
      state.lang = value;
    }
  },
  actions: {},
  modules: {}
});

lang: null 中存放的就是使用者所選擇的語系
setLang (state, value) {state.lang = value;} 則是語系切換的設定

接著回到我們的 App.vue 檔中
先在模板中放入切換語系的介面，我們利用單選框來切換：

<template>
  <div>
    <label
      v-for="(item, index) in optionsLang"
      v-bind:key="index"
    >
      <input type="radio" v-model="$store.state.lang" :value="item.value" v-on:change="setLang(item.value)"> {{ item.text }}
    </label>
    <h1>{{ $t('base.add')}}</h1>
    <h2>{{ $t('base.delete')}}</h2>
  </div>  
</template>

接者到 <script> 中寫入切換語系的功能：

<script>
export default {
  data () {
    return {
      optionsLang: [
        { text: '中文', value: 'zh' },
        { text: 'English', value: 'en' }
      ]
    }
  },
  methods: {
    setLang (value) {
      this.$store.commit('setLang', value);
      this.$i18n.locale = value;
      localStorage.setItem('footmark-lang', value);
    }
  }
}
</script>

由以上程式碼可得知，我們可以使用 $t(key) 去依照所選擇的 key 去切換語系，接著到 methods 中儲存我們所切換的語系。

最後，我們至 src/main.js 檔中設定各類語系的語系檔：

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

import VueI18n from 'vue-i18n' 
import zh from './i18n/zh'  
import en from './i18n/en'

Vue.use(VueI18n)

let locale = 'en';

if (localStorage.getItem('footmark-lang')) {
  locale = localStorage.getItem('footmark-lang');
  store.commit('setLang', locale);
} else {
  store.commit('setLang', locale);
}

const i18n = new VueI18n({
  locale: locale,
  messages: {
    'zh': zh,
    'en': en
  }
});

Vue.config.productionTip = false;

new Vue({
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

首先，需要引入 Vue I18n 及我們的中英文語系檔，接者設定我們的預設語系：let locale = 'en'，並檢查 localStorage 是否有保存使用者選用的語系資訊。

接者重啟網頁，我們的語系切換就完成拉！

以上就是我們今日的 vue-i18n 小小實作，謝謝大家的觀看
那我們明天見！