Question

使用https://github.com/kazupon/vue-i18n进行本地化

Vue.t（）|| $ t（）|| trans（）接收一个字符串，该字符串是由vue-i18n
翻译的密钥

嘿伙计们！我正在尝试以下代码：

import Vue from 'vue'

export default {
    task: {
        status: [
            { id: 'pending', name: Vue.t('pending') },
            { id: 'done', name: 'Done' }
        ]
    }
}

那是我的state.js，这是我VUEX的状态！当我尝试使用Vue.t函数时，我有以下错误：

未捕获的TypeError：_vue2.default.t不是函数

我的解决方案（我认为它不是最好的也有利于提高性能）

让我的 state.js 像这样：从'vue'导入Vue

export default {
    task: {
        status: [
            { id: 'pending', name: 'pending' },
            { id: 'done', name: 'done' }
        ]
    }
}

我做了以下的getter（vuex getter）

import { map } from 'lodash'
import { trans } from 'utils/helpers/translation' // helper for Vue.t(string)

export const getTaskStatus = ({ task }) => map(task.status, (obj) => {
    return { id: obj.id, name: trans(obj.name) }
})

任何人都知道如何才能让它发挥作用？

Answer 1

看看vuex-i18n库，它可以解决您想要开箱即用的问题。

Answer 2

1- main.js

import Vue from 'vue';
import Vuex from 'vuex';
import App from './App';
import { store } from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

2- App.vue：这里我用按钮来改变语言：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
        <div>
          <h1>{{ "index.title" | translate }}</h1>
          <p>{{ $t("index.content", {"type": "nice"}) }}</p>
        </div>
        <div>
          <h1>{{ "home.title" | translate }}</h1>
          <p>{{ $t("home.content", {"type": "nice"}) }}</p>
        </div>
        <div>
          <h1>{{ "product.title" | translate }}</h1>
          <p>{{ $t("product.content", {"type": "nice"}) }}</p>
          <p>{{ $t("product.unit", {"type": "nice"}) }}</p>
        </div>
        <button @click="setLang('fa')">پارسی</button>
        <button @click="setLang('en')">English</button>
        <button @click="setLang('ar')">العربیه</button>
      </div>
  </div>
</template>

<script>
    export default {
    data() {
      return {
        posts: [],
        errors: []
      }
    },
    methods:{
      setLang(lang){
        this.$store.dispatch('changeCulture', lang)
      }
    },
    created () {
      this.$store.dispatch('changeCulture', 'en')
    }
  }
</script>

3-store＆gt; index.js：在这里我尝试使用疼痛，变异和动作来改变本地：

import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsEn from '../locals/en.json';
import translationsFa from '../locals/fa.json';

Vue.use(Vuex);

export const store = new Vuex.Store({
     state: {
          fallback:'en',
          locale:''
     },
     mutations: {
          setCulture(state, payload){
               state.locale = payload
               Vue.i18n.set(state.locale);
          }
     },
     actions: {
          changeCulture ({commit}, payload, adad) {
               commit('setCulture',payload)
          }
     },
     getters: {
          language (state) {
               return state.locale
          }
     }
})
Vue.use(vuexI18n.plugin, store);
Vue.use(vuexI18n.plugin, store);

Vue.i18n.add('en', translationsEn);
Vue.i18n.add('fa', translationsFa);

Vue.i18n.set('fa')

4- en.json / fa.json：有些人可能会要求：

{
     "index":{
          "title": "Hello ",
          "content": "This is some {type} content"
     },
     "home":{
          "title": "About us",
          "content": "Node developing team"
     },
     "product":{
          "title": "Produc",
          "content": "Select one product",
        "unit":"unit"
     }
}

... 4- fa.json是：

{
    "index":{
        "title": "سلام ",
        "content": "به دنیای کد خوش آمدید"
    },
     "home":{
          "title": "درباره ما",
          "content": "تیم برنامه نویسی نود"
     },
     "product":{
          "title": "محصولات",
        "content": "یک محصول را انتخاب کنید",
        "unit":"واحد شمارش"
     }
}

它就像一个魅力。

在Vuex状态下使用kazupon / vue-i18n

我的解决方案（我认为它不是最好的也有利于提高性能）

2 个答案: