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

Question

(请参阅结尾为什么这不是一个骗局我如何在另一个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

Answer 1

假设我想将数据导入到以下组件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 2

经过几个小时的搞乱后,我最终得到了一些有用的东西,部分回答了类似的问题:如何在另一个JavaScript文件中包含一个JavaScript文件？

但有一个导入正在搞砸其余部分:

在.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 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