Nuxt3 配置pinia首选要在 Nuxt3 项目中安装pinia
Nuxt3官方pinia模块安装链接
直接在项目终端下输入 npm 命令
npm i pinia @pinia/nuxt // pinia：
npm i -D @pinia-plugin-persistedstate/nuxt // pinia-plugin-persistedstate
如果你是使用pnpm 或者 yarm 等其他npm工具，直接替换 npm 即可
安装好pinia后，就要配置 nuxt.config
在modules中注册 pinia/nuxt 及 pinia-plugin-persistedstate/nuxt
export default defineNuxtConfig({// devtools: { enabled: false },ssr: true,routeRules: {}, // 对指定页面设置规则app: {// 设置网页title小图标head: {link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],},},modules: [// 注册模块"@pinia/nuxt","@pinia-plugin-persistedstate/nuxt",],css: [],//引入css全局文件devServer: {// 开启局域网host: "0.0.0.0",},// 运行时常量runtimeConfig: {// 类似isServer自定义的普通变量只能在服务端拿到isServer: true,// public 内的变量 服务端 和 客户端 都能拿到public: {baseUrl: process.env.VITE_SERVER_NAME,},},
});
在 composables 中创建 store.js
// 网上有很多版本在nuxt.config内使用自动引入defineStore ，我是失败的，按以下手动引入是成功的
import { defineStore } from 'pinia'
// 这里是安装了zipson 用来序列化 缓存 pinia 对象内容，便于阅读
// npm install zipson // zipson 不需要在config中注册，直接使用即可
import {parse,stringify
} from 'zipson'
export const useTestStore = defineStore('testStore', () => {const number = ref(0)return {number}
}, {persist: {storage: {getItem(key) {return window.localStorage.getItem(key)},setItem(key, value) {window.localStorage.setItem(key, value)},},serializer: {deserialize: parse,serialize: stringify,}}
})
在页面上的使用
const testStore = useTestStore()
console.log(testStore.number)
// 亲测有效，默认是localStore缓存，可以自行配置pinia的其他缓存形式
)
