首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >导入/导出vuejs项目的javascript变量

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

Stack Overflow用户
提问于 2018-10-22 13:38:08
回答 1查看 3.7K关注 0票数 0

这可能不是任何人想要将变量从一个javascript导出/导入到另一个javascript的最佳示例,但希望它足够好。

我有一个javascript文件,我在其中初始化了一个变量,让我们将这个变量命名为counter,这个javascript文件在CounterModel.js中。我还有一个名为CounterController.js的javascript文件,它实际上对我的计数器做了一些事情。

在我的vue文件中,我想在App.vue中初始化计数器,并在Counter.vue中修改它。

所以我有下面的设置,它给了我三个类似的警告,所以我一定是做错了什么。所以我想问一下:

我在这里做错了什么?

输出

代码语言:javascript
复制
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

代码语言:javascript
复制
export let counter

async function initiateCounter () {
  counter = 0
}

module.exports = {
  initiateCounter
}

CounterController.js

代码语言:javascript
复制
import { counter } from './CounterModel'

async function incrementCounter () {
  counter++
}

async function getCounter () {
  return counter
}

module.exports = {
  incrementCounter,
  getCounter
}

App.vue

代码语言:javascript
复制
<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

代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2018-10-23 03:22:52

我想补充的是,我遇到的最大的问题是消除了最后一个警告,我认为这是与导出和导入javascript文件中的计数器有关的,但实际上是关于导入vue文件中的计数器函数,它给出了警告。

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

实际的代码包含两个对象,一个是"app.js“,另一个是"counter.js”,其中需要一个app对象来修改“计数器”。希望"app“永远不需要在它自己的文件之外做任何修改。

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

app.js

代码语言:javascript
复制
export let app

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

export default {
  initialiseApp
}

counter.js

代码语言:javascript
复制
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
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52922984

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档