[Vue3] TypeError: Cannot read properties of undefined (reading '$store') 해결

Vue3 TypeError: Cannot read properties of undefined (reading '$store') 해결하기

Vuex의 store 사용할 때 자주 볼 수 있는 오류 입니다.

 

vue2와 vue3의 store의 사용법이 달라서 일어날 수 있는 오류 입니다.

1. main.js 확인

vue2에서 vue3를 오면서 main.js에 store를 사용하고하는 명시법이 바뀌었기에 많이 나는 오류 입니다.

 

해결법

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store/store'

createApp(App)
    .use(store)
    .mount('#app')

main.js

store.js를 import한 후 use(store) 추가해 주어야 App 전역에서 store에 접근이 가능합니다.

2. script 에 useStore 사용

특정 component에서는 잘 사용이 되었는데 특정 component에서는 위 같은 오류가 난다면 script를 확인 해야합니다.

import { createStore } from "vuex";

export const store = createStore({
   state: {
    items: ['item1', 'item2']
   },
   mutations: {
    consoleItem() {
        console.log('addOneItem')
    }
   }
});

main.js 예시

<template>
	<li v-for="item in $store.state.items" v-bind:key="item">
    	{{ item }}
	</li>
</template>

component 예시

<template> 태그 안에서는 $store.state.items 처럼 $store 키워드에 바로 접근할 수 있습니다.

 

<script> 태그 안에서 위처럼 $store 혹은 this.$store 처럼 $store 키워드를 통해서 접근했다면, undefined 오류가 날 수 있습니다.

 

이 경우, useStore API를 통해서 store 생성해서 사용해야합니다.

 

<template>
	<li v-for="item in $store.state.items" v-bind:key="item" @click='callStore'>
    	{{ item }}
	</li>
</template>

<script setup>
    import { useStore } from 'vuex';

    const store = useStore();	//store 정의

    const callStore = () => {
        store.commit('consoleItem');	//store.js의 mutations의 consoleItem 호출
    }
</script>

script에서 store 사용한 component 예시

위 처럼 vuex에서 제공하는 useStore를 사용해 store를 불러와서 사용할 수 있습니다.