时间戳

首页 > 解决方案 > 为 vuejs 项目导入/导出 javascript 变量

javascript - 为 vuejs 项目导入/导出 javascript 变量

问题描述

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

我有一个 javascript 文件，我在其中启动了一个变量，我们将这个变量称为 counter 和它所在的 javascript 文件CounterModel.js。我还有一个 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
}

应用程序.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>

计数器.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>

标签： javascriptimportvuejs2exportvue-cli-3

解决方案

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

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

let counter=0; export default counter

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

  1. 同样的原因import counterController from '~/api/CounterController'。如果要在Counter.vue文件中使用 import，请在 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 中修改

推荐阅读