您好,我目前在 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"
}
}
您还需要安装 Pinia 本身
yarn add pinia @pinia/nuxt
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'],
});
Pinia 支持 Nuxt Bridge 和 Nuxt 3。对于裸 Nuxt 2
你使用 nuxt 2 所以需要安装composition-api
yarn add pinia @pinia/[email protected] @nuxtjs/composition-api
npm install pinia @pinia/[email protected] @nuxtjs/composition-api
nuxt2使用vuex的建议
npm i vuex