我正在开发一个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)
})
所有其他部分(用户名等)都运行良好,所以我知道我正在经历这个“然后”,但我的翻译似乎并不关心我商店的变化。
有人知道怎么做吗?
暂无答案!
目前还没有任何答案,快来回答吧!