如何从Vue + webpack + vue-loader项目中的不同js文件导入函数

Question

（请参阅结尾为什么这不是How do I include a JavaScript file in another JavaScript file?）

的欺骗

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中的范围的复杂性，我不确定是什么“正确的“方法吗？

提前致谢

为什么这不是骗局：How do I include a JavaScript file in another JavaScript file?

似乎没有解决问题，特别是在vuejs的上下文中。

我试过这个：

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

将功能修改为：exports.myfunc = function()

我应该有一些其他的依赖吗？因为我得到一个不同的错误：

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

Answer 1

经过几个小时的搞乱后，我终于得到了一些有用的东西，部分回答了类似问题：How do I include a JavaScript file in another JavaScript file?

但是导致其他内容搞砸了：

在.vue个文件中使用require

<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');

一切都按预期进行。

Answer 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>

Answer 3

我喜欢Anacrust的答案，但是，由于实际上两次执行了“ console.log”，因此我想对src/mylib.js做一个小的更新：

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

export default test

所有其他代码保持不变...

Answer 4

我试图组织我的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

---

修改

在获得有关Vue的更多经验之后，我发现您也可以使用mixins将代码拆分为不同的文件，并使其更易于编码和维护，请参见https://vuejs.org/v2/guide/mixins.html