I’m learning VueX but when i code have problem Cannot read properties of undefined (reading ‘state’). Here is my code.

When i console.log(this.$store at TodoIteam.vue it return undefined

TodoIteam.vue

<template>
    <div class="todo-list">
        <ul>
            <li v-for="todo in todos" :key="todo.id">
                {{ todo.text }}
            </li>
        </ul>  
    </div>
</template>
  
<script>

export default {
    name: 'TodoIteam',
    computed: {
        todos() {
            return this.$store.state.socialIcons
        }
    },
    created() {
        console.log(this.$store);  return undefined???
    }
}
</script>

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const storeData = {
    state() {
        return {
            todos: [
                { id: 1, text: 'Learn Vue' },
                { id: 2, text: 'Learn Vuex' },
                { id: 3, text: 'Build something awesome' }
            ]
        }
    },
}

const store = new Vuex.Store(storeData);

export default store;

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false


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

How can i get todos in store or I was doing something wrong