这可能不是任何人想要将变量从一个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>
发布于 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
}
https://stackoverflow.com/questions/52922984
复制相似问题