javascript - 如何在 vue 组件中重用全局 javascript 文件

Question

我有一个从以下 lang.min.js 创建的 Lang 对象:

https://github.com/rmariuzzo/Lang.js

在我的 Laravel 应用程序中，我在 app.js 中有以下内容:

import SearchToggle from './components/toggle.vue'
import Lang from './lang.min.js'
...
Vue.component('toggle', Toggle);
...
var lang = new Lang();
lang.setMessages(require('./messages.js'));
console.log(lang.getLocale());
console.log(lang.get('main.specialties'));
...

lang 对象没有错误并设法按预期输出 get。

现在我在以下目录中有一个 vue 组件，如上所示导入:ressource/assets/js/components/toggle.vue

在脚本部分:

<script>
export default{
        data(){
            return {
                text_holder: lang.get('main.specialties'),

            }
        },
  ...
}

但是这不起作用。它提示 lang 未定义。我想我错过了 javascript 范围的差距(概念)。我认为，如果所有内容都在 app.js 中并被导入，那么 var lang 将在全局范围内，我将被允许在导入过程中的任何地方使用它(类似于 vendor 来自 php 的方式)我猜不是。

现在我该怎么办？在每个 vue 组件上引入一个导入(但随后我必须确保向后的路径是正确的，并且多次加载相同的对象/message.js 会使 javascript 膨胀。

感谢 JS 的帮助。

Answer 1

创建您的 lang.js，并导出 lang 实例

var lang = new Lang();
lang.setMessages(require('./messages.js'));
...
export default lang;

然后您可以在您的组件中导入和使用该实例

import lang from 'path/to/lang'

export default {
  data () {
    return {
      text_holder: lang.get('main.specialties'),
      ...
    }
  }
}

另一种方式是写plugins ，您可以将 lang 注入(inject) Vue，这样您就可以在组件中访问 lang。