javascript—使用vuejs和i18n的数据库存储语言

5vf7fwbs  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(433)

我正在开发一个vuejs应用程序(我对它很陌生,还在学习),我试图使这个应用程序多语言。目标是当您到达登录页面(非登录用户)时,应用程序将自动采用您的浏览器语言。在您登录时,应用程序将具有您的配置文件中指定的区域设置。
当然,对我来说,登录后一切都不会改变。
让我展示一下我的尝试:
我有一个数据库中使用“fr”语言的用户,我在浏览器中使用的是“en”语言。
我在i18n.js中这样做:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages() {
    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
    const messages = {}
    locales.keys().forEach(key => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i)
        if (matched && matched.length > 1) {
            const locale = matched[1]
            messages[locale] = locales(key)
        }
    })
    return messages
}

export const selected_locale = navigator.language.split('-')[0]

export default new VueI18n({
    locale: selected_locale || process.env.VUE_APP_I18N_LOCALE || 'en',
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
    messages: loadLocaleMessages()
})

我在main.js中导入
比我的store/index.js中有:

import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import i18n from 'vue-i18n'
import Vue from 'vue'
import {selected_locale} from "../i18n";

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        isAuthenticated: false,
        token: '',
        locale: selected_locale,
        user: {},
    },
    mutations: {
        updateLocale(state, newLocale) {
            state.locale = newLocale
        }
    },
    actions: {
        changeLocale({commit}, newLocale) {
            i18n.locale = newLocale // important!
            commit('updateLocale', newLocale)
        }
    },
    plugins: [createPersistedState()],
    modules: {}
})

最后,在我的登录视图中,我执行以下操作:

axios
            .post("/api/v1/token/login", formData)
            .then(response => {
              const token = response.data.auth_token
              this.$store.commit('setToken', token)
              axios.defaults.headers.common['Authorization'] = 'Token ' + token
              localStorage.setItem('token', token)
              this.$store.commit('setUser', response.data.user)
              localStorage.setItem('username', response.data.user.username)
              localStorage.setItem('user_id', response.data.user.id.toString())
              this.$store.dispatch('changeLocale', response.data.user.language)
              const toPath = this.$route.query.to || '/'
              this.$router.push(toPath)
            })

所有其他部分(用户名等)都运行良好,所以我知道我正在经历这个“然后”,但我的翻译似乎并不关心我商店的变化。
有人知道怎么做吗?

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题