如何在 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注入Vue，这样你就可以在你的组件中访问lang。