导入/导出vuejs项目的javascript变量
导入/导出vuejs项目的javascript变量
提问于 2018-10-22 13:38:08
这可能不是任何人想要将变量从一个javascript导出/导入到另一个javascript的最佳示例，但希望它足够好。
我有一个javascript文件，我在其中初始化了一个变量，让我们将这个变量命名为counter，这个javascript文件在CounterModel.js中。我还有一个名为CounterController.js的javascript文件，它实际上对我的计数器做了一些事情。
在我的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>回答 1
Stack Overflow用户
发布于 2018-10-23 03:22:52
我想补充的是，我遇到的最大的问题是消除了最后一个警告，我认为这是与导出和导入javascript文件中的计数器有关的，但实际上是关于导入vue文件中的计数器函数，它给出了警告。
此-> import counter from '~/api/CounterModel'需要默认导出。
实际的代码包含两个对象，一个是"app.js“，另一个是"counter.js”，其中需要一个app对象来修改“计数器”。希望"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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52922984
复制相关文章
相似问题
腾讯云开发者
