Сделать прототип доступным в vuex - PullRequest
Новая
       7

Сделать прототип доступным в vuex

0 голосов
/ 21 января 2019

В моем app.js файле я создаю его, чтобы использовать перевод в vue: 

Vue.prototype.trans = string => _.get(window.i18n, string);

Это прекрасно работает в моих файлах vue: 

{{ trans('translation.name') }}

Проблема в том, что я использую vuex, и мне нужно перевести некоторые вещи в модуль: 

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

Vue.use(Vuex);

export default {
    namespaced: true,

    state: {
        page: 1,
        criterias: [
            {
                name: this.trans('translation.name'),
                filter: "life",
                active: false
            }
     }
 }

Но здесь this.trans('translation.name') не работает. Как я мог заставить это работать?

Ответы [ 3 ]

0 голосов
/ 31 января 2019

Поскольку ваш перевод контента window.i18n в любом случае является глобальным, почему бы не определить другой trans метод, похожий на тот, который вы добавляете в Vue.prototype в модуле вашего магазина?

Если вас беспокоит необходимость позже отредактировать этот метод в двух местах, определите модуль перевода с помощью этого единственного метода и используйте его в обоих местах, где вы устанавливаете Vue.prototype и внутри вашего модуля магазина.

0 голосов
/ 01 февраля 2019

Я бы назвал мутирование прототипа Vuex плохой практикой, и в этом случае это действительно не нужно.

Просто создайте файл с именем localization.js и создайте экземпляр подключаемого модуля i18n в этом файле. Плюс экспортируйте именованную функцию, чтобы вернуть тот же экземпляр i18n. 

// localization.js

const i18n = new VueI18n({ ... });

export const getLocalization = () => i18n;

export default i18n;

Затем в свой модуль Vuex импортируйте функцию getLocalization и выполните ее, чтобы получить тот же экземпляр i18n и выполнить переводы, используя ее. 

// vuex-module.js

import Vue from 'vue';
import Vuex from 'vuex';
import { getLocalization } from './localization';

Vue.use(Vuex);

const i18n = getLocalization();

export default {
  state: {
    criteria: i18n('translation.name'),
  },
}
0 голосов
/ 31 января 2019

Я могу предложить вам обходной путь.Вы можете переместить инициализацию criterias из store.js в App.vue, используя мутацию.

store.js 

state: {
    page: 1,
    criterias: []
},

mutations: {

    setCriterias(state, payload) {
        state.criterias = payload;
    },

}

App.vue 

beforeMount() {

   this.$store.commit( 'setCriterias' , [

        {
            name: this.trans('translation.name'),
            filter: "life",
            active: false
        }

   ])

}
...