fix: i18n hydration on dev

This commit is contained in:
三咲智子 Kevin Deng 2023-01-15 23:15:03 +08:00
parent f96a9417da
commit 6b90131783
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
2 changed files with 6 additions and 13 deletions

View file

@ -10,8 +10,7 @@ export default defineNuxtPlugin(() => {
{ {
innerHTML: ` innerHTML: `
;(function() { ;(function() {
const handle = localStorage.getItem('${STORAGE_KEY_CURRENT_USER_HANDLE}') const handle = localStorage.getItem('${STORAGE_KEY_CURRENT_USER_HANDLE}') || '[anonymous]'
if (!handle) { return }
const allSettings = JSON.parse(localStorage.getItem('${STORAGE_KEY_SETTINGS}') || '{}') const allSettings = JSON.parse(localStorage.getItem('${STORAGE_KEY_SETTINGS}') || '{}')
const settings = allSettings[handle] const settings = allSettings[handle]
if (!settings) { return } if (!settings) { return }

View file

@ -4,21 +4,15 @@ import type { LocaleObject } from 'vue-i18n-routing'
export default defineNuxtPlugin(async (nuxt) => { export default defineNuxtPlugin(async (nuxt) => {
const i18n = nuxt.vueApp.config.globalProperties.$i18n as VueI18n const i18n = nuxt.vueApp.config.globalProperties.$i18n as VueI18n
const { setLocale, locales } = i18n const { setLocale, locales } = i18n
const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
const userSettings = useUserSettings() const userSettings = useUserSettings()
const lang = userSettings.value.language const lang = $computed(() => userSettings.value.language)
if (process.client && !supportLanguages.includes(lang)) const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
if (!supportLanguages.includes(lang))
userSettings.value.language = getDefaultLanguage(locales as string[]) userSettings.value.language = getDefaultLanguage(locales as string[])
if (process.server) { watch([$$(lang), isHydrated], () => {
if (lang !== i18n.locale) if (isHydrated.value && lang !== i18n.locale)
await setLocale(lang)
return
}
watch(() => userSettings.value.language, (lang) => {
if (lang !== i18n.locale)
setLocale(lang) setLocale(lang)
}, { immediate: true }) }, { immediate: true })
}) })