踩雷系列：在 Vue3 中怎麼使用 Vue I18n 取得陣列和物件的值？
發表Debug Series4 分鐘讀完 (大約656個字)

踩雷系列：在 Vue3 中怎麼使用 Vue I18n 取得陣列和物件的值？

上週在開發公司專案時有遇到實作 i18n 功能的需求，結果在要拿取陣列裡面的資料時竟然遇到 bug 了，果不其然這是一個不會中斷更新的系列（只要我繼續當工程師）！
下面一起來看看我踩了什麼雷然後怎麼解決的吧？

遇到的問題

在設定 vue i18n 的時候，我像以前一樣使用 vuei18n 提供給我的 $t 物件來取得我的翻譯檔案內的值，可是卻遇到取不到值的狀況。
花了很多時間看一下是不是自己引入錯誤還是有其他的地方寫錯？結果都沒找到QQ
最後在 vue i18n 的 repo 中看到了這個 Issue才知道自己是踩到版本不同的雷。

在 vue i18n 的 v8 版本（ for Vue2 ）跟 v9 版本（ for Vue3 ）裡面有一些比較重大的改變，其中一個就是包含要取得陣列內的資料時不能再使用 $t 物件，要視情況改成使用 $tm( Translation Messages) 物件並搭配 $rt( Runtime Translation ) 的動態 function 來取得值。

解決的方法

使用 v9 版本新提供的 $tm 物件來取得陣列資料內的值

1
2
3
const { t, tm } = useI18n({ useScope: 'global' })
const partnerTypes: PartnerTypeList = tm('pages.Partners.partnerTypes')
const allPartnerLists: PartnersList = tm('pages.Partners.partnersList')

最後的結語

因為這次的踩雷剛好發現 v8 和 v9 版本有些寫法上的差異和改變，算是額外的學習機會。
不過最近有一個蠻深刻的體悟，就是官方文件的重要性然後對於套件的熟悉度真的都會很大程度的影響我們的開發速度，希望自己能夠更熟悉這些工具同時培養專案經驗！

那我們下次見ʘ‿ʘ

參考資料

#

評論

追蹤

最新文章

分類

×