Vuex Cannot read property 'state' of undefined

Question

I am new to Vue and I am getting an error and don't understand why and how I can solve this. The error in the console I got is this : Cannot read property 'state' of undefined

I am working with vue version @vue/cli 4.5.12

This are the files I have :

main.js

import { createApp } from 'vue'

import App from './App.vue'
import router from './router.js'
import {store} from './store.js'

const app = createApp(App)

app.use(router, store)

app.mount('#app')

store.js

import { createStore } from 'vuex'

const store = createStore ({
    state() {
        return {
            socialIcons: {
                github: {
                    icon: "/../assets/images/Github.svg",
                    name: "Github",
                    link: "https://github.com/Roene"
                },
                linkedin: {
                    icon: "/../assets/images/LinkedIn.svg",
                    name: "Linkedin",
                    link: "https://www.linkedin.com/in/roene-verbeek/"
                },
                instagram: {
                    icon: "/../assets/images/Instagram.svg",
                    name: "Instagram",
                    link: "https://www.instagram.com/roeneverbeek/"
                }
            }
        }
    }
})
export default store

Home.vue

<template>
    <section class="home">
        <div class="title">
            <h1 class="nameTitle">{{name}}</h1>
            <h2 class="jobTitle">{{jobTitle}}</h2>
            <div class="icons">
                <div class="icon">
                    <a
                        target="_blank"
                        v-for="icon in socialIcons"
                        class="icon"
                        :href="icon.link"
                        :key="icon.name"
                    >
                        <span class="iconName">{{icon.name}}</span>
                        <img class="iconImage" :src="icon.icon" :alt="icon.name">
                    </a>
                </div>
            </div>
        </div>
        <div class="photo">
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            name: "Roene Verbeek",
            jobTitle: "Front-end developer",
            socialIcons: this.$store.state.socialIcons
        }
    }
}
</script>

Can someone tell me why I get this error and how I can fix this error?

Answer 1

the use method accept one plugin as first parameter and options (which si optional) as second one app.use(plugin, itsOptions), so you should do :

 import store from './store.js'// without {} since you did export default in your store
  ...
  app.use(router).use(store)

and socialIcons has to be a computed property :

export default {
    data() {
        return {
            name: "Roene Verbeek",
            jobTitle: "Front-end developer",
            
        }
    },
computed:{
    socialIcons(){
          return this.$store.state.socialIcons
     }
}
}