Vue.js error 6:1 error Prefer default export import/prefer-default-export

Question

I started vuex study and i have an error in Vue.js/Vuex-store: 6:1 error Prefer default export import/prefer-default-export; The error telling me that i have to change export const store to export default and i don't want it

I can't fix and help please;

// Vuex store
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {
    increment: (state) => {
      state.count += 1;
    },
  },
});


// main.js
import Vue from 'vue';
import App from './App.vue';
import { store } from './Vuex-store/store.js';

new Vue({
  render: (h) => h(App),
  store,
}).$mount('#app');

<template>
  <div>
    {{ this.$store.state.count }}
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {
    increment() {
      this.$store.getters.increment;
    },
  },
};
</script>

Abbas · Accepted Answer · 2021-08-24 19:30:08Z

1

this is just an eslint rule. It wants you to do a default export instead of export const:

Export it like this:

export default store

Then, instead of importing like

import { store } from './Vuex-store/store.js';

do just

import store from './Vuex-store/store.js';

answered Aug 24, 2021 at 19:30

Abbas

1,2652 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nikoloz gabidzashvili Over a year ago

it's don't working again error: 6:16 error 'store' is not defined no-undef

Abbas Over a year ago

could you show me the code somewhere? Which line is the throwing the error in which of the two files?

nikoloz gabidzashvili Over a year ago

export default store

Abbas Over a year ago

first set const store = new Vue.Store({}), then export this store variable using export default store

grovskiy · Accepted Answer · 2021-09-03 09:01:05Z

0

Try it

<template>
  <div>
    {{ count }}
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.getters.increment;
    },
  },
};
</script>

edited Sep 3, 2021 at 9:01

answered Aug 24, 2021 at 20:33

grovskiy

8086 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vue.js error 6:1 error Prefer default export import/prefer-default-export

2 Answers 2

4 Comments

Try it

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Try it

Comments

Your Answer

Sign up or log in

Post as a guest

Related