如何在Vue.js应用中正确配置Vuex？无default导出报错如何解决

问题根源 #

你当前使用的是Vue 3版本，但Vuex配置采用的是Vue 2 + Vuex 3的旧版API，二者不兼容导致报错，具体错误点如下：

• Vue 3不存在全局默认导出的Vue对象，你store文件中import Vue from 'vue'、Vue.use(Vuex)的写法本身就不被Vue 3支持
• 适配Vue 3的Vuex 4+版本，创建store实例需要用createStore方法，而非new Vuex.Store
• main.js中导入store的写法错误：store是默认导出，你使用了解构导入的写法；且不需要单独调用app.use(Vuex)，直接注册创建好的store实例即可

修复步骤 #

1. 确认依赖版本 #

首先确保你安装的是适配Vue 3的Vuex 4及以上版本，安装命令：

npm install vuex@4 --save

2. 修正store文件（@/store/users.js） #

import { createStore } from 'vuex'

const store = createStore({
  state: {
    userData: "USER!"
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  }
})

export default store

3. 修正main.js代码 #

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store/users'

const app = createApp(App)

app.use(router)
app.use(store)

app.mount('#app')

修改完成后重新运行项目即可解决报错。

内容的提问来源于stack exchange，提问作者user467566