Vue项目迁移Nuxt时使用store/index.js报vue.reactive is not a function错误

核心原因 #

• Nuxt 内置 Vuex 集成，不支持普通 Vue 项目中手动调用 createStore 创建实例导出的写法
• 若使用 Nuxt 2（底层基于 Vue 2），安装了适配 Vue 3 的 Vuex 4.x 版本，Vue 2 未顶层暴露 reactive API，运行时就会触发该报错

解决步骤 #

1. 修改 store/index.js 代码，符合 Nuxt 约定式 Store 规范：

// 直接导出对应配置项即可，不需要手动创建store实例
export const state = () => ({})

export const mutations = {}

export const actions = {}

export const modules = {}

2. 校验 Vuex 版本适配性：

• 若使用 Nuxt 2，安装适配 Vue 2 的 3.x 版本 Vuex：

  npm uninstall vuex
  npm install vuex@3
  

• 若使用 Nuxt 3，官方已弃用内置 Vuex 支持，推荐直接使用 Pinia 作为状态管理方案。

3. 重启 Nuxt 开发服务后即可生效。

报错截图参考 #

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