vue.js - 如何在vue.js框架中的另一个js文件中访问main.js中的常量？

Question

我有一个 vue.js 应用程序，并且在 main.js 文件中，我按照文档配置了 Vuei18n 。这是完美的工作，为了在其他组件中访问它，我已将其添加到 new Vue() 实例中，现在可以访问它(使用 this.$i18n ) .

现在我已经为验证规则创建了一个 validator.js 文件，我需要在那里使用 this.$i18n ，但它不起作用。我也尝试过 Vue.prototype.$i18n 但这也不起作用。有人可以帮我找出哪里出错了吗？

Answer 1

 导出 i18n 变量

我假设你的应用程序是一个 vue-cli 应用程序，或者至少你使用 webpack 来构建它 因此可以使用ES模块。

使用 vue-i18n 你会做如下的事情:

// step 1: define the i18n object via new Vue18n
const i18n = new VueI18n({
  locale: DEFAULT_LANGUAGE,
  messages,
});

// step 2: setup the Vue object to use this object:
new Vue({
 i18n,
 ... store, router.... whatever
})

哪里messages包含所有带有翻译键和值的 JSON。

我猜你已经在做类似的事情了。

现在，在您的验证器模块中，您需要完全相同的 i18n您插入到 Vue 的对象。

而不是尝试访问 Vue在你的验证器中，你可以简单地 export i18n变量来自main.js :

export {i18n}

所以，在你的 validator.js 中文件，您只需 import它:

import {i18n} from '@/main.js' // or whatever is the path

这几乎就是我在自己的应用程序中解决验证器国际化问题的方式。

重要说明:循环依赖

如果您已经导入 validator.js在你的main.js ，您将无法导入 i18n来自验证器模块中的 main 。为了避免此类问题，您可以移动 i18n初始化并导出到另一个模块，例如i18n.js ，因此验证器和主文件可以import它独立。

 没有 es6 模块

如果您没有使用 webpack 或其他 bundler 来捆绑代码，您仍然可以导出 i18n反对window对象:

window.i18n = i18n

然后从任何文件中使用它。您只需要小心存储 i18n window 中的对象在任何文件尝试访问它之前。