时间戳

首页 > 解决方案 > 使原型在 vuex 中可访问

javascript - 使原型在 vuex 中可访问

问题描述

在我的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')不工作。我怎样才能让它工作？

标签： javascriptvue.jsprototypevuex

解决方案

我认为变异 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'),
  },
}

推荐阅读