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

Posted 2023-02-23

【中文标题】如何在 vue 组件中重用全局 javascript 文件

【英文标题】：How to reuse a global javascript file within a vue component

【发布时间】：2017-05-24 11:21:31

【问题描述】：

我有一个从 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 的帮助。

【问题讨论】：

vuejs.org/v2/guide/state-management.html

@ceejayoz 但来自 lang.min.js 的对象不是状态 - 它是一个参考对象，将其消息加载到 json 文件格式中。所以它就像携带一个配置的静态数组。

【参考方案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。

【讨论】：

不会在每个组件中导入它会使 vue 膨胀吗？

不，javascript中的import只会导入一次模块

所以你说如果我有 16 个组件并且所有这些组件 import 同一个文件 javascript 实际上只导入一次？

是的，你可以试试。

我尝试了您的导出解决方案，但在组件中使用时得到以下结果：[Vue warn]: Error when evaluating expression "lang.get('main.specialties')": TypeError: Cannot read property 'get' of undefined (found in component: <toggle>)