如何在Vue组件中重用全局JavaScript文件

Question

如何在Vue组件中重用全局JavaScript文件

4

我有一个从lang.min.js创建的Lang对象，来自于：

在我的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对象没有错误，并成功输出了所需的结果。

现在我有一个Vue组件，位于以下目录中，并按照上述方式导入：ressource/assets/js/components/toggle.vue

在script部分：

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

            }
        },
  ...
}

然而这并不起作用。它会抱怨lang未定义。我认为我缺少javascript作用域的间隙（概念）。我认为，如果一切都在app.js中并被导入，则var lang将在全局作用域中，并且我可以在导入的任何地方使用它（类似于php中的vendor）。我猜不是这样的。现在我该怎么办？在每个vue组件中拉入一个导入（但这样我必须确保向后的路径正确，并且多次加载相同的对象/message.js会使JavaScript膨胀）。感激JS帮助。

- azngunit81

https://vuejs.org/v2/guide/state-management.html - ceejayoz

@ceejayoz 但是来自lang.min.js的对象不是状态 - 它是一个引用对象，它将其消息加载到JSON文件格式中。因此，就像携带配置的静态数组一样。 - azngunit81

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CodinCat · Accepted Answer

创建你的 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'),
      ...
    }
  }
}

另一种方法是编写插件，您可以将lang注入到Vue中，以便在组件中访问lang。