I'm creating a Vue application. Now, I want to add vuex to my project. Vuex was added success, but I'm can't add a vuex store. And when I include the vuex script:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userData: "USER!"
},
mutations: {
},
actions: {
},
getters: {
}
})
export default store
I'm getting an error:
Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=52de2cee' does not provide an export named 'default'
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
const app = createApp(App)
import Vuex from 'vuex'
import { store } from '@/store/users'
app.use(router)
app.use(Vuex)
app.mount('#app')
What I'm doing wrong? Thanks a lot.
The first block of code you show is for Vue 2, which won't work in Vue 3. And Vue 3 requires Vuex 4.
To setup Vuex 4 in a Vue 3 app:
Install Vuex 4:
npm i -S vuex@next
Update the store to use the Vuex 4 createStore API (which creates a plugin for app.use() in the next step):
// @/store.js
import { createStore } from 'vuex'
export default createStore({
state: {
userData: "USER!"
},
mutations: {
},
actions: {
},
getters: {
}
})
Update the main script to install the store with app.use():
import { createApp } from 'vue'
import store from '@/store'
const app = createApp(App)
app.use(store)