VueJs 3 - Vuex : Uncaught TypeError: store is not a function

Question

I'm learning Vuejs and in my project I have some warnings and nothing display since I tried to use the store (VUEX)

So I have :

├── index.html
└── src
     ├── views
        └── Feed.vue      
     └──store
       └── index.ts
     ├── App.vue
     ├── main.ts

My main.ts is:

// initialisation des éléments pours VUE
import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import axios from 'axios'
import VueAxios from 'vue-axios'


// initialisation des imports pour Font Awesome
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
import {
  faSpinner,
  faPaperPlane,
  faHandPeace,
  faSignOutAlt,
  faShieldAlt,
  faUserPlus,
  faImage,
  faEdit,
  faUsersCog,
  faTools,
  faRss,
  faTimesCircle,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

// initialisation des imports pour Bootstrap
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
import "bootstrap/dist/js/bootstrap.js";

// intégration des icones font awesome à la librairy
library.add(faUserSecret);
library.add(faSpinner);
library.add(faPaperPlane);
library.add(faHandPeace);
library.add(faSignOutAlt);
library.add(faShieldAlt);
library.add(faUserPlus);
library.add(faImage);
library.add(faEdit);
library.add(faEdit);
library.add(faUsersCog);
library.add(faTools);
library.add(faRss);
library.add(faTimesCircle);


// Création de l'app
const app = createApp(App);
  app.use(store);
  app.use(router);
  app.use(VueAxios, axios);
  app.provide('axios', app.config.globalProperties.axios) ;
  app.component("font-awesome-icon", FontAwesomeIcon);
  app.mount("#app");

My ./store/index.ts

// Imports 
import { createApp } from 'vue'
import { createStore } from 'vuex'
import axios from 'axios';


//Create Store :

export const store = createStore({

  // Define state
  state () {
    return{
      feedList: []
    }
  },

  // Define Actions
  actions: {
    getPosts( { commit } ) {
      axios.get('http://localhost:3001/api/feed')
          .then(feedList => {
            commit('setFeedList', feedList)
      })
    }
  },

  // Define mutations
  mutations: {
    setFeedList(state:any, feedList:any) {
      state.data = feedList
    }
  }, 

})

My ./views/Feed.vue :

<template>
  <div id="Feed">
    <div id="profil" class="col-12 col-md-3">
      <Cartridge />
    </div>
    <div id="feedcontent" class="col-12 col-md-9">
      <SendPost />
      <div id="testlist" v-for="thePost in feedList" :key="thePost">
        {{ thePost }}
    </div>
  </div>
</template>

<script lang="ts">
import Cartridge from '@/components/Cartridge.vue';
import SendPost from '@/components/SendPost.vue';
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'Feed',
  components: {
    Cartridge,
    SendPost
  },

  setup () {
    const store = useStore();

    const feedList = computed(() => store.state.data.feedList);
    console.log("feedList > " + feedList.value);
    return {
      feedList
    }
  },
}
</script>

<style lang="scss">
@import "../scss/variables.scss";

#profil {
  position: fixed;
  margin: 0;
  height: 100%;
}

#feedcontent {
  position: fixed;
  height: 100%;
  right: 0;
  background-color: $groupo-colorLight1;
  overflow-y: scroll;

  ::-webkit-scrollbar {
    width: 8px;
    color: $groupo-color1;
  }

  ::-webkit-scrollbar-track {
    background: $groupo-colorLight2;
    width: 20px;
    -webkit-box-shadow: inset 0 0 6px rgba($groupo-color4, 0.3);
  }

  ::-webkit-scrollbar-thumb {
    background: $groupo-color4;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: $groupo-color1;
  }
}
</style>

It looks like that I don't understand something in Vuex but I don't kow what. Can you tell me what is wrong ? (I hope not many things :) )/ Some people can help me ? please .

Thanks

mtkachenko · Accepted Answer · 2021-10-30 22:58:27Z

1

It looks like you're getting the error from the line in your ./store/index.ts where you're trying to export the result of applying the function invocation to the store instance on this line:

export default store();

The store instance is not a function indeed, and you're importing the result in your main.ts. Try just to export the store instance:

export default store

And probably you don't need the lines after that:

const app = createApp({})
app.use(store)

answered Oct 30, 2021 at 22:58

mtkachenko

3562 silver badges6 bronze badges

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

1 Comment

RoosDev Over a year ago

Thanks :) I edit the code with thes answers but still have error. Do you know why ?

Lucas David Ferrero · Accepted Answer · 2021-10-31 00:23:00Z

0

You're getting that error because you're trying to invoke an object, not a function.

Your error resides in the file named ./store/index.ts. You're doing 2 mistakes here. The first one is that you're trying to invoke createStore twice. Second one is that you're trying to create another app from your store.

Here I share to you the fixes.

// createStore() retuns an object that you the pass it in your main.ts.
const store:any = createStore({
  // all your store definitions...
})

At the end of that same file, you should only export the object that createStore() returns, so you can register it at app.use()(located in main.ts).

export default store
// remove the code bellow...

Edited: You're also making a mistake in the setup option. You should import the store that you already created.

import { store } from 'path/to/your/store/index.ts'
setup () {
    const myStore = store

    // property data doesn't exist in your state.
    const feedList = computed(() => myStore.state.feedList);
    console.log("feedList > " + feedList.value);
    return {
      feedList
    }

edited Oct 31, 2021 at 0:23

answered Oct 30, 2021 at 22:49

Lucas David Ferrero

1,98219 silver badges48 bronze badges

7 Comments

RoosDev Over a year ago

thank you for answer. But when I take off the lines : const app = createApp({}) app.use(store) ... it's the same. so I tried to write : export default store({ // all the store definitions .... }) but I have a new error : src/store/index.ts:9:16 TS2304: Cannot find name 'store'. 7 | //Create Store : 8 | > 9 | export default store({ | ^^^^^ 10 | 11 | // Define state 12 | state () { So I don't understand.

Lucas David Ferrero Over a year ago

That's because you're trying what is call a named export. It should be: export const store({ // all the store definitions .... }). Then in your main.ts the import changes to: import { store } from "./store";

RoosDev Over a year ago

Ok, thanks. But now , with export const store({ .... // all the store definition }) , I've a syntaxe error : 'Const declarations' require an initialization value. (3:18) 1 | import axios from 'axios'; 2 | //Create Store : > 3 | export const store; | ^ 4 | ({ 5 | // Define state 6 | state() {

Lucas David Ferrero Over a year ago

Don't forget the equal: export const store = createStore({ //store definitions })

RoosDev Over a year ago

yes, but with export const store = createStore({ //store definitions }), it doesn't work. I still have the same error : Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'feedList')

|

RoosDev · Accepted Answer · 2021-10-31 01:43:00Z

More than the really goods answers of @Lucas David Ferrero I forgot 1 thing .... in my Feed.vue : mounted the store !! So my file is now :

<template>
  <div id="Feed">
    <div id="profil" class="col-12 col-md-3">
      <Cartridge />
    </div>
    <div id="feedcontent" class="col-12 col-md-9">
      <SendPost />
      <div id="testlist" v-for="thePost in feedList" :key="thePost">
        {{ thePost }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Cartridge from '@/components/Cartridge.vue';
import SendPost from '@/components/SendPost.vue';
import { computed } from 'vue'
import { store } from '../store/index'


export default {
  name: 'Feed',
  components: {
    Cartridge,
    SendPost,
  },

  setup() {
    const myStore: any = store

    const feedList = computed(() => myStore.state.feedList);
    console.log("feedList > " + feedList.value);
    return {
      feedList
    };
  },

  mounted() {
    const myStore: any = store
    myStore.dispatch("getPosts");
  }
}
</script>

<style lang="scss">
@import "../scss/variables.scss";

#profil {
  position: fixed;
  margin: 0;
  height: 100%;
}

#feedcontent {
  position: fixed;
  height: 100%;
  right: 0;
  background-color: $groupo-colorLight1;
  overflow-y: scroll;

  ::-webkit-scrollbar {
    width: 8px;
    color: $groupo-color1;
  }

  ::-webkit-scrollbar-track {
    background: $groupo-colorLight2;
    width: 20px;
    -webkit-box-shadow: inset 0 0 6px rgba($groupo-color4, 0.3);
  }

  ::-webkit-scrollbar-thumb {
    background: $groupo-color4;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: $groupo-color1;
  }
}
</style>

Big thanks to my helpers !!

Collectives™ on Stack Overflow

VueJs 3 - Vuex : Uncaught TypeError: store is not a function

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related