Nuxt 2.15.8+Vue2.7.10+TS环境下Pinia无法使用问题求助

核心问题分析 #

你安装的@pinia/nuxt@0.4.9是为Nuxt 3或启用了Nuxt Bridge的Nuxt 2项目设计的，纯Nuxt 2.15.8环境不兼容，这是导致警告「Nuxt bridge is required」和模块找不到问题的根本原因；而「Can't import the named export 'computed'」错误则是因为不兼容的Pinia版本与Vue 2.7的ES模块导出逻辑冲突。

具体解决步骤 #

1. 清理不兼容依赖并安装适配版本 #

卸载不适配的@pinia/nuxt，安装支持Vue 2.7的Pinia核心包：

npm uninstall @pinia/nuxt
npm install pinia@^2.1.7

2. 手动创建Pinia插件 #

在项目根目录的plugins文件夹下创建pinia.js（或pinia.ts）文件，内容如下：

import { createPinia } from 'pinia'

export default ({ app }) => {
  const pinia = createPinia()
  app.use(pinia)
}

3. 配置Nuxt加载插件 #

修改nuxt.config.js，在plugins数组中添加上述插件：

export default {
  // ...其他配置项
  plugins: [
    '~/plugins/pinia.js'
  ],
  // ...其他配置项
}

4. 配置TypeScript类型支持 #

在项目根目录的tsconfig.json中添加Pinia的类型声明：

{
  "compilerOptions": {
    // ...其他配置项
    "types": [
      "pinia"
    ]
  }
}

5. 修复ES模块导出错误 #

如果仍出现computed导出错误，可在nuxt.config.js中添加webpack配置，强制将Pinia处理为ES模块：

export default {
  // ...其他配置项
  build: {
    extend(config) {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      })
    }
  }
}

验证 #

重启Nuxt开发服务，尝试创建并使用Pinia store：

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在组件中引入使用：

<script setup lang="ts">
import { useCounterStore } from '~/stores/counter'
const counterStore = useCounterStore()
</script>

<template>
  <button @click="counterStore.increment">Count: {{ counterStore.count }}</button>
</template>

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