Question

这可能不是关于为什么有人想要将变量从一个javascript导出/导入到另一个javascript的最佳示例，但希望它足够好。

我有一个JavaScript文件可在其中初始化变量，我们将其称为变量计数器，并将其命名为CounterModel.js中的javascript文件。我也有一个JavaScript文件，该文件实际上与我的计数器CounterController.js有作用。

在我的vue文件中，我想在App.vue中启动我的计数器，并在Counter.vue中对其进行修改。

所以我在下面进行了此设置，它给了我三个类似的警告，因此我必须做错了什么。所以我想问：

这是怎么了？

输出

WARNING  Compiled with 3 warnings                                                                                                                                                    06:35:49

 warning  in ./src/App.vue?vue&type=script&lang=js&

"export 'default' (imported as 'counter') was not found in './api/CounterModel'

 warning  in ./src/components/counter/Counter.vue?vue&type=script&lang=js&

"export 'default' (imported as 'counterController') was not found in '../../api/CounterController'

 warning  in ./src/components/counter/Counter.vue?vue&type=script&lang=js&

"export 'default' (imported as 'counterController') was not found in '../../api/CounterController'

CounterModel.js

export let counter

async function initiateCounter () {
  counter = 0
}

module.exports = {
  initiateCounter
}

CounterController.js

import { counter } from './CounterModel'

async function incrementCounter () {
  counter++
}

async function getCounter () {
  return counter
}

module.exports = {
  incrementCounter,
  getCounter
}

App.vue

<template>
<div>
      <router-view></router-view>
</div>
</template>

<script>

import counter from '~/api/CounterModel'

export default {
  name: 'App',
  async created () {
    await counter.initiateCounter()
  }
}

</script>

Counter.vue

<template>

<div>
      <button v-on:click="incrementCounter">Add 1</button>
    {{ counter }}
</div>
</template>

<script>
import counterController from '~/api/CounterController'

export default {
  name: 'Counter',
  data () {
    return {
      counter: null
    }
  },
  methods: {
    incrementCounter: async function () {
      counterController.incrementCounter()
    },
    getCounter: async function () {
      this.counter = counterController.getCounter()
    }
  },
  async created () {
    await this.getCounter()
  }
}
</script>

Answer 1

首先，您不应该混淆import / export和require / module.exports。 import / export是ES6语法，require / module.export是Commonjs语法。

在App.vue中，如果您使用import counter from '~/api/CounterModel'，则意味着必须在CounterModel.js中将计数器导出为默认值

let counter=0; export default counter

否则，您可以使用import {counter} from '~/api/CounterModel'

与import counterController from '~/api/CounterController'相同的原因。如果要在Counter.vue文件中使用导入，请在CounterController.js中使用ES6导出语法，而不要使用module.exports。

```

import { counter } from './CounterModel'

async function incrementCounter () {
  counter++
}

async function getCounter () {
  return counter
}

export incrementCounter;
export getCounter;

```

并且您还应该注意，您刚刚在此处导入的计数器实际上是不可编辑的。因为ES6将输入值视为常数。如果您尝试修改，它将得到typeError。但是可以在CounterModel.js中修改

Answer 2

我想补充一点，我最大的问题是消除最后的警告我以为与在javascript文件中导出和导入计数器有关，但实际上与在要发出警告的vue文件中导入计数器功能有关。

此-> import counter from '~/api/CounterModel'需要默认导出。

实际代码包含两个对象，一个“ app.js”和一个“ counter.js”，其中需要一个应用程序对象来修改“ counter”。希望“ app”不需要在其自己的文件之外进行任何修改。

所以我真正想要的是更接近这个的

app.js

export let app

async function initialiseApp () {
  app = window.safe.initialiseApp()
}

export default {
  initialiseApp
}

counter.js

import { app } from '~/api/safenetwork'

async function createCounter () {
  counter = await app.createCounter()
}

async function incrementCounter () {
  await counter.increment()
}

async function getCounter () {
  return counter
}

export default {
  createCounter,
  incrementCounter,
  getCounter
}

导入/导出Vue.js项目的JavaScript变量

2 个答案: