Unable to use Vuex in Vue 3

Question

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.

gsmig · Accepted Answer · 2021-02-15 05:03:13Z

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({
...
...
})

edited Feb 15, 2021 at 5:03

answered Feb 15, 2021 at 4:53

gsmig

1003 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to use Vuex in Vue 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related