Vue.use() is throwing "Cannot read property 'use' of undefined" - vue.js

Question

Attempt 1
main.js
import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'
Vue.config.productionTip = false
const app = createApp(App)
app.use(store)
app.mount('#app')
store.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
patients: []
}
});
Attempt 1 Error
Uncaught TypeError: Cannot read property 'use' of undefined
at eval (store.js?07a4:4)
at Module../src/store/store.js (app.js:1342)
Attempt 2
main.js
import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'
Vue.config.productionTip = false
const app = createApp(App)
app.use(store)
app.mount('#app')
store.js
import Vuex from 'vuex'
import Vue from 'vue'
export const store = new Vuex.Store({
state: {
patients: []
}
});
Attempt 2 Error
vuex.esm.js?94ea:135 Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
at assert (vuex.esm.js?94ea:135)
at new Store (vuex.esm.js?94ea:380)
at eval (store.js?07a4:6)
I created a Vue application using Vue CLI. I am trying to implement Vuex. I have followed numerous tutorials (usually set up 2 different ways). When using a debugger, I was able to stop before it read "Vue.use(Vuex)". Logging Vue at this point returns undefined. I believe my imports are correct but do not know if I am missing something crucial. Any help is much appreciated.
EDIT: The only difference between Attempt 1 and 2 is I removed "Vue.use(Vuex)" on Attempt 2.

Answer 1

You're using vuex 3 syntax with Vue 3 which is compatible with vuex 4 that has the following syntax :
store.js
import { createStore } from 'vuex'
// Create a new store instance.
const store = createStore({
state: {
patients: []
}
})
export default store;
then use the exported store in the main.js :
import { createApp } from 'vue'
import store from './store/store'
import App from './App.vue'
Vue.config.productionTip = false
const app = createApp(App)
app.use(store)
app.mount('#app')
Vuex 4 docs
Vue.js 3 docs

Answer 2

I was able to get this working by uninstalling my VueX (3.6)
npm uninstall vuex
and installing the VueX (4.0 alpha)
npm i vuex#4.0.0-alpha.1
The reason for this error was because I was using 2 different syntax methods from different versions.
Thanks for everyone's help!
main.js
import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')
store.js
import { createStore } from 'vuex'
// Create a new store instance.
const store = createStore({
state () {
return {
patients: []
}
}
})
export default store;