<p>I'm using <code>Vue3</code> and <code>Vuex4</code> but I keep getting the following error: </p> <pre class="brush:php;toolbar:false;">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)</pre> <p>I want to set "hello" as a message variable to use throughout the application, here is my <code>main.js</code> file: </p> <pre class="brush:php;toolbar:false;">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')</pre> <p>This is my App.vue file and I'm trying to receive it using a calculated function and a composed API. </p> <pre class="brush:php;toolbar:false;">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{ } } }</pre></p>

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