Vuex 상태에서 kazon/vue-i18n 사용

Vuex 상태에서 kazon/vue-i18n 사용

현지화를 위해 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' }
    ]
  }
}

이것은 나의 상태입니다.js는 나의 VUEX의 상태입니다!Vue.t 기능을 사용하려고 하면 다음 오류가 발생합니다.

Uncatched TypeError: _vue2.default.t는 함수가 아닙니다.

내 솔루션(성능에도 좋은 솔루션이라고 생각하지 않음)

내 주.js가 그렇게 하도록 내버려 둬:

import Vue from 'vue'

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

그리고 저는 다음과 같은 게터(vueex 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) }
})

그것을 작동시키는 가장 좋은 방법이 무엇인지 아는 사람?

vuex-i18n 라이브러리를 살펴보십시오. 이 라이브러리는 바로 사용할 수 있는 기능을 제공합니다.

1- 메인.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 > 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.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": "Product",
    "content": "Select one product",
    "unit": "unit"
  }
}

4- fa.json은 다음과 같습니다.

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

그리고 그것은 매력적으로 작용합니다.

언급URL : https://stackoverflow.com/questions/41557351/using-kazupon-vue-i18n-inside-a-state-of-vuex