Pinia 与 Nuxt 3 不兼容的问题

Question

您好，我目前在 Nuxt3 中集成 pinia 时遇到问题，每当我运行

npm run dev

时，它都会向我发出警告。

WARN  Module pinia is disabled due to incompatibility issues:
 - [bridge] Nuxt bridge is required

ℹ Parsed 1 files in 0.3 seconds

我尝试仔细检查 pinia 的安装并确保我正在运行 nuxt 3。我是否误认为 Nuxt 桥是 Nuxt 3 的一部分？我对 Nuxt 开发还很陌生。我通过

npm install @pinia/nuxt

安装了pinia

我的 nuxt 配置

buildModules: [
  '@nuxt/typescript-build',
  '@nuxtjs/stylelint-module',
],

modules: [
  '@nuxtjs/axios',
  '@nuxt/content',
  '@pinia/nuxt',  
  'nuxt-buefy',
],

axios: {
  // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
  baseURL: '/',
},

package.json

{
  "name": "...",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start ",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix && npm run lint:style -- --fix",
    "prepare": "",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,ts,vue}": "eslint --cache",
    "*.{css,scss,sass,html,vue}": "stylelint",
    "*.**": "prettier --check --ignore-unknown"
  },
  "dependencies": {
    "@nuxt/content": "^1.0.0",
    "@nuxtjs/axios": "^5.13.6",
    "@pinia/nuxt": "^0.4.6",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "nuxt-buefy": "^0.4.24",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@commitlint/cli": "^17.1.2",
    "@commitlint/config-conventional": "^17.1.0",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^29.1.2",
    "eslint": "^8.24.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-jest": "^27.0.4",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "jest": "^29.1.2",
    "jest-environment-jsdom": "^29.1.2",
    "lint-staged": "^13.0.3",
    "postcss-html": "^1.5.0",
    "prettier": "^2.7.1",
    "pug": "^3.0.2",
    "pug-plain-loader": "^1.1.0",
    "sass": "^1.56.2",
    "sass-loader": "^10.4.1",
    "stylelint": "^14.13.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard": "^28.0.0",
    "ts-jest": "^29.0.3",
    "vue-jest": "^3.0.4"
  }
}

Answer 1

您还需要安装 Pinia 本身

yarn add pinia @pinia/nuxt

或使用 npm

npm install pinia @pinia/nuxt

package.json

"dependencies": {
    "@pinia/nuxt": "^0.4.7",
    "pinia": "^2.0.33",
  },

nuxt.config.ts

export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],      
});

来源：https://pinia.vuejs.org/ssr/nuxt.html

Answer 2

Pinia 支持 Nuxt Bridge 和 Nuxt 3。对于裸 Nuxt 2

你使用 nuxt 2 所以需要安装composition-api

yarn add pinia @pinia/[email protected] @nuxtjs/composition-api

或使用 npm

npm install pinia @pinia/[email protected] @nuxtjs/composition-api

nuxt2使用vuex的建议

npm i vuex