Question

我有一个Lang对象，它是从lang.min.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将在全局范围内，并且我将被允许在导入的任何地方使用它（类似于供应商来自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。

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

1 个答案: