Search code examples
vue.jsvuexvuejs3

Unable to use Vuex in Vue 3


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.


Solution

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