I'm trying to integrate the use of Vuex into a very small Vue 3 application, but I'm unable to load things for reasons that are totally unclear to me. My main.js is very simple and does a use()
statement on the Vuex store as documentation indicates I should do:
import { createApp } from "vue"
import App from "./app.vue"
import store from "./store.js"
const app = createApp(App)
app.use(store)
app.mount("#app")
The store itself is pretty simple with the first relevant lines looking like the following:
import axios from "axios"
import { createStore } from "vuex"
export default {
store: createStore({
However, when I load my app after it compiles successfully without any warnings, I get this in the debugger:
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn @ runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "$store" was accessed during render but is not defined on instance.
at <EventListByDay>
at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function
at <EventListByDay>
at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Cannot read property 'state' of undefined
at Proxy.events (event-list-by-day.vue?04a6:61)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
at Object.get [as events] (runtime-core.esm-bundler.js?5c40:5611)
at Proxy.render (event-list-by-day.vue?04a6:2)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:696)
at componentEffect (runtime-core.esm-bundler.js?5c40:4035)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
What am I missing? I know it's something basic here. Note that installed Vuex as npm install --save vuex@next
as the Vuex documentation indicated I should do to support Vue 3.
You're exporting it as an object {store: Store}
but what you really want to do is export the Store
instance created by createStore()
.
On your store.js
const store = createStore({
...
...
})
export default store
or
export default createStore({
...
...
})