Как импортировать функции из разных файлов 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 метод обычным способом для Vue внутри methods, Он использует функцию, которую я написал в отдельном 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
Источник

3 ответа

Решение

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

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

Использование требуют в .vue файлы

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

Экспорт в mylib

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

избежать import

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

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

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

Я изменился на:

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

И все работает как положено.

Источник

Скажем, я хочу импортировать данные в компонент из 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>
Источник

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

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

export default test

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

Источник

Я пытался организовать свой код приложения vue и столкнулся с этим вопросом, поскольку у меня много логики в моем компоненте и я не могу использовать другие субкомпоненты, имеет смысл использовать многие функции в отдельном файле js и вызывать их в файле vue, вот моя попытка

1) Компонент (файл.vue)

//MyComponent.vue file
<template>
  <div>
  <div>Hello {{name}}</div>
  <button @click="function_A">Read Name</button>
  <button @click="function_B">Write Name</button>
  <button @click="function_C">Reset</button>
  <div>{{message}}</div>
  </div>
 </template>


<script>
import Mylib from "./Mylib"; // <-- import
export default {
  name: "MyComponent",
  data() {
    return {
      name: "Bob",
      message: "click on the buttons"
    };
  },
  methods: {
    function_A() {
      Mylib.myfuncA(this); // <---read data
    },
    function_B() {
      Mylib.myfuncB(this); // <---write data
    },
    function_C() {
      Mylib.myfuncC(this); // <---write data
    }
  }
};
</script>

2) Внешний файл js

//Mylib.js
let exports = {};

// this (vue instance) is passed as that , so we
// can read and write data from and to it as we please :)
exports.myfuncA = (that) => {
  that.message =
  "you hit ''myfuncA'' function that is located in Mylib.js  and data.name = " +
    that.name;
};

exports.myfuncB = (that) => {
  that.message =
  "you hit ''myfuncB'' function that is located in Mylib.js and now I will change the name to Nassim";
  that.name = "Nassim"; // <-- change name to Nassim
};

exports.myfuncC = (that) => {
  that.message =
  "you hit ''myfuncC'' function that is located in Mylib.js and now I will change the name back to Bob";
  that.name = "Bob"; // <-- change name to Bob
};

export default exports;

3) посмотрите на это в действии: https://codesandbox.io/s/distracted-pare-vuw7i?file=/src/components/MyComponent.vue

Источник
Другие вопросы по тегам