Nuxt3+pinia+pinia-plugin-persist（踩坑指南）

原文地址：Nuxt3+pinia+pinia-plugin-persist（踩坑指南）_梨花炖海棠的博客-CSDN博客

最近在做一个PC端的项目，准备使用nuxt3+pinia来做数据持久化的问题，看到了这个兄弟分享的文章

在使用这个兄弟分享的代码及插件的时候，发现一个问题，稍微做了一下修复

简单教程如下

第一步：安装插件及扩展

# yarn方式安装
yarn add pinia @pinia/nuxt pinia-plugin-persist
# 错误1：如果你的 npm 版本大于 6 则需要 添加 --legacy-peer-deps
yarn add pinia @pinia/nuxt pinia-plugin-persist --legacy-peer-deps

# npm安装
npm install --save pinia @pinia/nuxt pinia-plugin-persist
# 错误1：如果你的 npm 版本大于 6 则需要 添加 --legacy-peer-deps
npm install --save pinia @pinia/nuxt pinia-plugin-persist --legacy-peer-deps

第二步：配置（nuxt.config.ts）

import { defineNuxtConfig } from 'nuxt';
import { resolve } from 'path';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ...
  modules: ['@pinia/nuxt'],
  ...
})

第三步：配置持久化插件（pinia-plugin-persist）

plugins 目录下创建 pinia-plugin-persist.client.ts 文件

import { defineNuxtPlugin } from "#app";
import piniaPersist from "pinia-plugin-persist";

export default defineNuxtPlugin((nuxtApp) => {
  # 切记，这里是跟“梨花炖海棠”兄弟不一样，这个地方需要$pinia进行挂载
  nuxtApp.$pinia.use(piniaPersist)
});

第四步：创建pinia持久化模块文件

在根目录创建stores目录，然后创建user.ts文件，代码如下：

import { defineStore } from "pinia";

export default defineStore("user", {
  state: () => {
    return {
      token: "",
      userinfo: {},
    };
  },
  actions: {
    // 用户登录
    login(data: any) {
      this.setToken(data.token);
      this.setUserInfo(data.userinfo);
    },
    // 单独更新或写入token
    setToken(data: any) {
      this.token = data;
    },
    // 单独更新用户信息或写入
    setUserInfo(data: any) {
      this.userinfo = data;
    },
    // 用户退出
    logout() {
      this.token = "";
      this.userinfo = {};
    },
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: "USER-INFO",
        storage: process.client ? localStorage : null,
      },
    ],
  },
});

第五步：使用pinia

在你的page目录下创建login.vue，代码如下：