Importing/exporting javascript variables for vuejs project

Question

This is probably not the best example for why anyone would want to export/import variables from one javascript to another, but hopefully it's good enough.

I've got one javascript file where I initiate a variable, let's call this variable counter and the javascript file it's in CounterModel.js. I also have a javascript file that actually does something with my counter called CounterController.js.

In my vue files I want to initiate my counter in App.vue and modify it in Counter.vue.

So I've this setup below and it's giving me three similar warnings so I must be doing something wrong. So I'd like to ask:

What am doing wrong here?

output

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>

Answer 1

First of all, you should not mix up import/export and require/module.exports. import/export is ES6 syntax, and require/module.export is Commonjs syntax.

1. in App.vue, if you use import counter from '~/api/CounterModel', which means you must export counter as default in your CounterModel.js

let counter=0; export default counter

Otherwise, you could use import {counter} from '~/api/CounterModel'

2. Same reason for import counterController from '~/api/CounterController'. If you want to use import in your Counter.vue file, use ES6 export syntax in your CounterController.js instead of module.exports.

```

import { counter } from './CounterModel'

async function incrementCounter () {
  counter++
}

async function getCounter () {
  return counter
}

export incrementCounter;
export getCounter;

```

And also you should note that counter you just imported here is actualy not editable. Because ES6 regard imported value as constant. It will get typeError if you tried to modified. But it can be modified in CounterModel.js