Подтвердить что ты не робот

как импортировать функции из другого js файла в проекте Vue + webpack + vue-loader

(см. конец, почему это не является обманом. Как включить файл JavaScript в другой файл JavaScript?)

Javascipt + Vue + webpack + vue-loader noob... наткнуться на самые простые вещи!

У меня есть App.vue которого есть шаблон:

<template>
 <div id="app">
     <login v-if="isTokenAvailable()"></login>
 </div>
</template>

Я объявляю метод isTokenAvailable обычным способом для внутренних methods Vue. Он использует функцию, которую я написал в отдельном файле js:

<script>
import * as mylib from './mylib';

export default {
  ....
    methods:{
        isTokenAvailable: () => {
            return mylib.myfunc();
        }
    }
}
</script>

mylib начинается следующим образом:

import models from './model/models'
import axois from 'axios'

export default function() {
    // functions and constants
}

Когда я запускаю проект, я получаю предупреждение:

export 'myfunc' (imported as 'mylib') was not found in './mylib'

Полагаю, что я не импортирую или не декларирую javascript-модуль правильно... но, похоже, существует так много способов сделать это, добавив сложность обзора в Vue, я не уверен, что такое "правильный" способ сделать это?

заранее спасибо

Почему это не обман: как включить файл JavaScript в другой файл JavaScript?

Похоже, проблема не устранена, особенно в контексте vuejs.

Я пробовал это:

<script>
const mylib = require('./mylib');
...
</script>

С измененной функцией: exports.myfunc = function()

Должен ли я иметь какую-то другую зависимость для этого? Потому что я получаю другую ошибку:

[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
4b9b3361

ОТВЕТЫ

Ответ 1

После нескольких часов беспорядков я в конечном итоге получил что-то, что работает, частично ответил в аналогичной проблеме здесь: Как включить файл JavaScript в другой файл JavaScript?

НО был импорт, который закручивал остальную часть:

Использовать в файлах .vue

<script>
  var mylib = require('./mylib');
  export default {
  ....

Экспорт в mylib

 exports.myfunc = () => {....}

Избегайте import

Фактическая проблема в моем случае (которая, как я думал, не имеет значения!) mylib.js том, что mylib.js сам использовал другие зависимости. Полученная ошибка, похоже, не имеет к этому никакого отношения, и не было никакой перекопанной ошибки от webpack но в любом случае у меня было:

import models from './model/models'
import axios from 'axios'

Это работает, пока я не использую mylib в компоненте .vue. Однако, как только я использую mylib там, возникает ошибка, описанная в этом вопросе.

Я изменил на:

let models = require('./model/models');
let axios = require('axios');

И все работает так, как ожидалось.

Ответ 2

Предположим, что я хочу импортировать данные в компонент из src/mylib.js:

var test = {
  foo () { console.log('foo') },
  bar () { console.log('bar') },
  baz () { console.log('baz') }
}

export default test

В моем файле.Vue я просто импортировал test из src/mylib.js:

<script> 
  import test from '@/mylib'

  console.log(test.foo())
  ...
</script>

Ответ 3

Мне нравится ответ Anacrust, хотя, поскольку "console.log" выполняется дважды, я хотел бы сделать небольшое обновление для src/mylib.js:

let test = {
  foo () { return 'foo' },
  bar () { return 'bar' },
  baz () { return 'baz' }
}

export default test

Весь другой код остается прежним...