uniapp切换语言只生效一次

段落1： 问题描述：在Uniapp开发中，实现切换语言功能时，由于对语言的切换是根据用户行为触发的，因此需要及时更新语言状态，但如果只更新一次，出现了语言切换只生效一次的问题，接下来，针对这个问题做出详细的分析和解决方法。 首先，需要了解Uniapp实现多语言的原理。Uniapp官方提供了i18n插件，该插件支持国际化通用库及本地语言包。国际化通用库支持了很多 API，包括获取、切换、设置语言等，具体实现可以查看官方文档。 在实现过程中，应该确保语言状态的更新及时生效，为此可以通过vuex来保存全局语言状态。如下代码所示：

main.js

import Vue from 'vue'
import App from './App'
import i18n from './common/locale'
import store from './store'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype._i18n = i18n
Vue.prototype.$store = store
const app = new Vue({
  store,
  i18n,
  ...App
})
app.$mount()

在Vuex中，我们可以通过定义mutations来更新语言状态，如下所示：

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    lang: uni.getStorageSync('lang') || 'en'
  },
  mutations: {
    setLang(state, lang) {
      state.lang = lang
    }
  }
})
export default store

当用户切换语言时，我们可以通过commit提交一个mutations，更新语言状态，并使用uni.setStorageSync来将当前语言状态保存在本地缓存中。如下所示：

pages/index/index.vue

import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations('global', ['setLang']),
    changeLang(lang) {
      this.setLang(lang)
      uni.setStorageSync('lang', lang)
    }
  }
}

这里的mapMutations可以将mutations映射到当前组件的methods中，方便在组件内调用。由于uniapp是基于vue的，因此我们可以沿用vue的思想来实现多语言。这样，每当用户切换语言时，都会立刻跟新全局状态，并将当前语言状态保存在本地缓存中。 段落2： 接下来，再看看只生效一次的情况。原因是由于语言生效需要手动调用更新方法，存储语言状态的本地缓存不会自动更新。一般情况下，我们会在每个组件的 mounted 生命周期中去获取当前语言状态，如下代码所示：

pages/index/index.vue

mounted() {
  this.lang = uni.getStorageSync('lang')
}

这种写法看起来很合理，但实际上这些组件会在应用程序初始加载时挂载，因此mounted只会在所在页面被打开的时候执行。如果从其他页面返回该组件界面，willAppear生命周期也不会触发（除非页面设置了`keep-alive`有效）。因此，我们需要在App.vue的生命周期`onShow`中，手动触发语言更新操作。如下所示：

App.vue

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('global', ['lang'])
  },
  onShow() { // 进入页面重新设置语言
    this.$i18n.locale = this.lang
  }
}

当用户从其他页面返回该组件时，App.vue会被重新加载和渲染，这样就能正常触发语言更新操作了，从而解决了“只生效一次”的问题。 段落3： 除了语言状态的更新，还有一个常见的问题，就是切换语言后无法自适应更新已经渲染的页面。这是因为已经渲染的页面都是在语言切换前就已经生成的，它们的文本内容还是原来的语言，要想让它们切换到新的语言状态，我们可以通过重新渲染页面来实现。 实际上，在uniapp中，我们可以通过v-if指令动态地检测语言状态，并根据语言状态的不同显示当前语言版本的页面。如下所示：

pages/index/index.vue

通过v-if指令的控制，我们可以实现切换语言后重新渲染页面的效果，但是这种方式并不优雅，如果页面内容非常多，那么在切换语言时需要重复写很多代码，这就显得很麻烦。因此，我们可以采用更简便的方法，即使用computed方法来实现自动更新页面。如下所示：

pages/index/index.vue

这种方式无需写大量的v-if指令，而且代码量也比较少，可以简单实现通过语言状态自动更新页面的效果。 段落4： 除了以上两种问题，还有一些细节需要注意。在实现多语言时，我们应该确保所有的默认文本都已经翻译到位了，避免出现漏翻译现象；同时语言切换时，应该调整所有组件的布局和样式，以适应当前语言状态。比如，有些语言的文本比较长，需要通过增加行距或者调整控件布局来适应。代码示例如下：

pages/index/index.vue

在这段代码中，我们通过增加行距和控件布局来适应不同语言版本的文本，这样就能确保不同语言版本的页面都能够正常显示了。 综上所述，Uniapp在实现切换语言功能时有些细节需要注意，比如语言状态的更新及时生效、已经生成的页面的重新渲染等。只要我们重视这些细节，并逐步完善我们的代码实现，就能够高效地实现多语言切换，为用户提供更多样化的体验。