随着全球化的快速发展，越来越多的应用需要支持多种语言。而uniapp作为一款跨平台的框架，在实现多语言切换时也受到了广泛的关注。然而，一些开发者反馈在使用uniapp框架进行多语言切换时，发现切换语言只生效一次，也就是说在切换到另一种语言后，再切换回原来的语言，界面并未完全还原。这引起了不少开发者的困扰，并对uniapp框架进行了深入探究。本文将探讨uniapp切换语言只生效一次的问题，并提供解决方案。
一、问题描述
在uniapp开发中，我们会使用到uni-i18n插件来实现多语言切换。这个插件非常方便，只需要在主入口文件中引入即可。代码如下：
import VueI18n from 'vue-i18n';
import messages from '@/common/lang'; // 引入语言文件
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: uni.getStorageSync('lang') || 'zh',
messages
});
export default i18n;然后在每个组件内，使用$t()方法来获取对应语言的翻译。例如：
{{ $t('home.title') }}
这样我们就可以轻松地实现多语言切换了。但是，一些开发者反馈在实际使用中发现，切换语言只生效一次。也就是说，在切换语言之后，再次切换回原来的语言时，并没有完全恢复到原来的状态。这种情况下，我们需要找到原因并解决它。
二、原因分析
通过对uni-i18n插件的源码进行研究，我们可以发现，语言切换是通过修改locale属性来实现的。而locale属性是存储在app.globalData对象中的。因此，切换语言只生效一次的问题可以归结为locale属性没有正确更新的问题。
在多语言切换的时候，我们会将新的locale属性存储到storage中，每次打开应用时，首先从storage中读取locale属性，如果storage中没有，则使用默认语言。而在切换语言时，我们会先更新locale属性，然后再将新的locale属性存储到storage中。根据这个流程，我们可以发现，切换语言只生效一次的原因在于，我们没有及时更新app.globalData对象中的locale属性。所以，当我们再次切换回原来的语言时，读取的还是旧的locale属性，导致界面没有完全恢复。
三、解决方案
实际上，解决这个问题比较简单。通过修改locale属性的同时，我们只需要在app.globalData对象中也修改一下即可。具体代码如下：
import VueI18n from 'vue-i18n';
import messages from '@/common/lang'; // 引入语言文件
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: uni.getStorageSync('lang') || 'zh',
messages
});
// 加入以下代码
i18n.vm.$watch('locale', function(val) {
console.log('i18n.vm.locale:', val);
uni.setStorageSync('lang', val);
uni.$emit('localeChange', val);
uni.getStorage({
key: 'lang',
success: function(res) {
if (res.data !== val) {
uni.setStorageSync('lang', val);
}
}
});
app.globalData.locale = val;
});
export default i18n;这里主要是加入了一个vm.$watch方法，当locale属性发生变化时，会自动更新app.globalData对象中的locale属性，从而解决了切换语言只生效一次的问题。
总结
在uniapp开发中，实现多语言切换是非常常见的需求。但是，如果我们不注意细节，就有可能遇到切换语言只生效一次的问题。通过对uni-i18n插件的研究和分析，我们发现问题的根源在于没有及时更新app.globalData对象中的locale属性。因此，只需要在修改locale属性的同时，更新app.globalData对象中的locale属性即可。这种问题的解决方案非常简单，但也提醒我们在开发过程中要注意细节，避免因为一些小错误导致应用无法正常运行。
