Having trouble with Vue3 and Vuex4, I keep encountering this error:
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)
Attempting to assign "hello" to the message variable for use across the application. Here's my 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')
In my App.vue file, I'm trying to access it using the composition api with the computed function.
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{ }
}
}