导入/导出vuejs项目的javascript变量

这可能不是一个最好的例子来解释为什么任何人都想将变量从一个javascript导出/导入到另一个javascript，但希望这已经足够好了

我有一个javascript文件，我在其中启动了一个变量，让我们调用这个变量计数器和

CounterModel.js

中的javascript文件。 我还有一个javascript文件，它实际上对我的计数器执行一些操作，名为

CounterController.js

在我的vue文件中，我想在

App.vue

中启动计数器，并在

counter.vue

中修改它

我在下面做了这个设置，它给了我三个类似的警告，所以我一定是做错了什么。 所以我想问：

我做错了什么

输出

CounterModel.js

CounterController.js

App.vue

从“~/api/CounterModel”导入计数器
导出默认值{
名称：“应用程序”，
异步创建（）{
等待计数器。初始化计数器（）
}
}

Counter.vue

加1
{{counter}}
从“~/api/counterController”导入计数器控制器
导出默认值{
名称：'计数器'，
数据（）{
返回{
计数器：空
}
},
方法：{
incrementCounter:异步函数（）{
counterController.incrementCounter（）
},
getCounter:异步函数（）{
this.counter=counterController.getCounter（）
}
},
异步创建（）{
等待此消息。getCounter（）
}
}

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

在App.vue中，如果使用

从“~/api/CounterModel”

导入计数器，这意味着您必须在CounterModel.js中将计数器作为默认值导出

设计数器=0；
导出默认计数器

否则，您可以使用

import{counter}从“~/api/CounterModel”

从“~/api/counterController”导入计数器控制器的原因与此相同。如果要在

Counter.vue

文件中使用导入，请在CounterController.js中使用ES6导出语法，而不是module.exports

```

```

---

你们还应该注意，你们刚才在这里导入的计数器实际上是不可编辑的。因为ES6将导入值视为常量。如果您试图修改，它将得到typeError。但是它可以在CounterModel.js中修改，我想补充一点，我遇到的最大问题是删除最后一个警告 我认为这与在javascript文件中导出和导入计数器有关，但实际上是在vue文件中导入计数器函数，它会发出警告

此->

从'~/api/CounterModel'

导入计数器需要默认导出

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

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

app.js

counter.js

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'

export let counter

async function initiateCounter () {
  counter = 0
}

module.exports = {
  initiateCounter
}

import { counter } from './CounterModel'

async function incrementCounter () {
  counter++
}

async function getCounter () {
  return counter
}

module.exports = {
  incrementCounter,
  getCounter
}

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

<script>

import counter from '~/api/CounterModel'

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

</script>

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

import { counter } from './CounterModel'

async function incrementCounter () {
  counter++
}

async function getCounter () {
  return counter
}

export incrementCounter;
export getCounter;

export let app

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

export default {
  initialiseApp
}

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
}