Vuex4 - 정의되지 않은 속성을 읽을 수 없음('상태' 읽기)

Vuex4 - 정의되지 않은 속성을 읽을 수 없음('상태' 읽기)

Vue3 및 Vuex4를 사용하고 있는데 다음 오류가 계속 나타납니다.

Uncaught TypeError: Cannot read properties of undefined (reading 'state')
    at ReactiveEffect.eval [as fn] (App.vue?3dfd:36)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:1087)
    at setup (App.vue?3dfd:37)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6656)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6272)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6228)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4081)
    at processComponent (runtime-core.esm-bundler.js?5c40:4056)
    at patch (runtime-core.esm-bundler.js?5c40:3651)

메시지 변수에 "hello"를 설정하여 앱 전체에서 사용할 수 있도록 하려고 합니다.이것은 main.js 파일입니다.

import { createApp} from 'vue'
import App from './App.vue'
import router from './router'
import { createStore } from 'vuex';


const store = createStore({
  state(){
    return{
      message: 'hello'
    }
  }
})


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

이것은 제 App.vue 파일입니다.계산 함수를 사용하여 컴포지션 api와 함께 받으려고 합니다.

import { ref, computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'App',
  setup(){
    const store = useStore();

    const message = computed(() => store.state.message);
    console.log(message.value);

    return{ }
  }
}

사용 방법:

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

언급URL : https://stackoverflow.com/questions/69501775/vuex4-cannot-read-properties-of-undefined-reading-state