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>

score 1 · Accepted Answer · answered Oct 22 '18 at 08:14

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.

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'

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

Folaht · Answer 2 · 2018-10-22T20:38:27.510

I'd like to add that the biggest issue I had was with eliminating the last warning that I thought had to do with exporting and importing the counter in the javascript files, but was really about importing the counter functions in the vue files that it was giving warnings of.

This -> import counter from '~/api/CounterModel' requires default exports.

The actual code contains two objects, one "app.js" and one "counter.js" where an app object is needed to modify the "counter". Hopefully, "app" never needs any modification outside of it's own file.

So what I really wanted is more close to this:

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
}

Importing/exporting javascript variables for vuejs project

2 Answers2