Импорт класса JavaScript в отдельный файловый компонент Vue с помощью Laravel Mix - PullRequest
Новая
       37

Импорт класса JavaScript в отдельный файловый компонент Vue с помощью Laravel Mix

0 голосов
/ 02 февраля 2019

Я пишу одностраничный компонент Vue в своем проекте, который связан с использованием Laravel Mix .Я хочу извлечь некоторую логику в свой собственный класс, чтобы ее можно было легко повторно использовать в других компонентах (но это не логика, которая должна быть самим компонентом Vue).

Я создал новый класси поместите его в TimeRangeConverter.js, в ту же директорию, что и мой компонент Vue. 

export default class TimeRangeConverter {
    static getFromTimestamp() {
        return 1;
    }
}

И в моем компоненте я импортирую его, как мне кажется, как обычно: 

<template>
    <div>
        Example component
    </div>
</template>

<script>
    import './TimeRangeConverter';

    export default {
        mounted() {
            console.log(TimeRangeConverter.getToTimestamp());
        }
    }
</script>

Однако Vue выдает ошибку, говоря ReferenceError: TimeRangeConverter is not defined.

Я использую стандартный файл конфигурации webpack.mix.js, который поставляется с Laravel 5.7: 

mix.js('resources/js/app.js', 'public/js');

И в моем основном app.js файл Я автоматически включаю компоненты Vue с: 

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Как правильно импортировать этот класс в компонент Vue для использования?

1 Ответ

0 голосов
/ 02 февраля 2019

Вы должны импортировать ваш класс внутри кода компонента, используя следующий синтаксис: 

 import TimeRangeConverter from './TimeRangeConverter';
...