uni-app与vuex-i18n多语言处理

发布于 1周前 作者 caililin 来自 Uni-App

uni-app与vuex-i18n多语言处理

之前一直用vue-i18n，后来发现$t始终出不来。 最后使用了vuex-i18n，$t()可以用this.$i18n.translate()来代替，总算暂时解决了多语言问题。纠结了我好久

ps:可能vue-i18n也有$t的替代方法，可是文档内容太多看花眼了

main.js

import Vue from 'vue'  
import App from './App'  

import store from './store'  
import vuexI18n from 'vuex-i18n';  

Vue.use(vuexI18n.plugin, store);  

const translationsEn = {  
    "content": "This is some {type} content"  
};  

const translationsDe = {  
    "content": "Dies ist ein toller Inhalt",  
};  

// add translations directly to the application  
Vue.i18n.add('en', translationsEn);  
Vue.i18n.add('de', translationsDe);  

// set the start locale to use  
Vue.i18n.set('de');  

Vue.config.productionTip = false  
Vue.prototype.$store = store  

App.mpType = 'app'  

const app = new Vue({  
    store,  
    ...App,  
})  
app.$mount()

index.vue

<template>  
    <view class="content">  
        <text class="title">{{title}}=>{{t_content}}</text>  
        <button type="primary" @tap="ddd">button</button>  
    </view>  
</template>  

<script>  
    export default {  
        data: {  
            title: 'Hello',  
            cur_lang: 'en'  
        },  
        computed:{  
            t_content(){  
                return this.$i18n.translate('content')  
            }  
        },  
        methods:{  
            ddd(){  
                console.log(1122)  
                console.log(this.$i18n.translate('content'))  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        flex: 1;  
        justify-content: center;  
        align-items: center;  
    }  

    .title {  
        font-size: 36px;  
        color: #8f8f94;  
    }  
</style>

Harmonyos Next教程
1 回复

在处理uni-app与vuex-i18n的多语言功能时，通常我们需要结合vuex进行状态管理，以及vue-i18n进行国际化处理。以下是一个简要的代码示例，展示如何在uni-app项目中集成并处理多语言功能。

1. 安装依赖

首先，确保你已经安装了vuex和vue-i18n。

npm install vuex vue-i18n --save

2. 配置Vuex

在store/index.js中配置Vuex，这里我们主要管理当前的语言状态。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    language: 'en' // 默认语言
  },
  mutations: {
    SET_LANGUAGE(state, language) {
      state.language = language;
    }
  },
  actions: {
    changeLanguage({ commit }, language) {
      commit('SET_LANGUAGE', language);
    }
  }
});

export default store;

3. 配置Vue I18n

在main.js中配置vue-i18n并注入到Vue实例中。

import Vue from 'vue';
import App from './App';
import store from './store';
import VueI18n from 'vue-i18n';

Vue.config.productionTip = false;
Vue.use(VueI18n);

const messages = {
  en: {
    welcome: 'Welcome'
  },
  zh: {
    welcome: '欢迎'
  }
};

const i18n = new VueI18n({
  locale: store.state.language,
  messages,
});

new Vue({
  store,
  i18n,
  render: h => h(App),
}).$mount('#app');

4. 切换语言

在你的组件中，你可以通过调用Vuex的action来切换语言。

<template>
  <div>
    <p>{{ $t('welcome') }}</p>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(language) {
      this.$store.dispatch('changeLanguage', language);
      this.$i18n.locale = language; // 更新i18n实例的locale
    }
  }
};
</script>

总结

以上代码展示了如何在uni-app中结合Vuex和Vue I18n进行多语言处理。通过Vuex管理语言状态，Vue I18n进行国际化翻译，可以在应用中实现动态切换语言的功能。注意，实际应用中你可能需要根据项目需求对代码进行扩展，如从服务器加载语言文件等。

回到顶部