Nuxt3之pinia持久化配置

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的其他缓存形式