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，代码如下：

 

<template>
  <div class="login-container">
    <div class="block-container">
      <div class="login-box">
        <div class="login-bg"></div>
        <div class="login-form">
          <div class="login-title">用户登录</div>
          <n-form ref="formRef" class="form-box" :model="formData">
            <n-form-item path="username" label="手机号码">
              <n-input
                v-model:value="formData.username"
                @keydown.enter.prevent
                placeholder="请输入手机号码"
              />
            </n-form-item>
            <n-form-item path="password" label="登录密码">
              <n-input
                v-model:value="formData.password"
                @keydown.enter.prevent
                placeholder="请输入登录密码"
              />
            </n-form-item>
            <div class="form-btn-group">
              <div class="form-start">
                <nuxt-link to="/register">我要注册</nuxt-link>
              </div>
              <div class="form-end">
                <nuxt-link to="/retrieve">忘记密码</nuxt-link>
              </div>
            </div>
            <div class="form-submit">
              <n-button type="primary" size="large" @click="onSubmit">
                立即登录
              </n-button>
            </div>
          </n-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { NForm, NFormItem, NInput, NButton } from "naive-ui";
import userStore from "@/stores/user";
const useUser = userStore();
const formData = reactive({
  username: "",
  password: "",
});
// 用户登录
function onSubmit() {
  // 使用pinia里面的方法
  useUser.setToken("123");
  // navigateTo("/");
}
</script>

<style lang="scss" scoped>
.login-container {
  .block-container {
    .login-box {
      display: flex;
      background: #fff;
      padding: 100px 0;
      margin-top: 15px;
      .login-bg {
        flex: 1;
      }
      .login-form {
        width: 500px;
        border-left: 1px solid #e5e5e5;
        .login-title {
          font-size: 1.5rem;
          font-weight: 700;
          text-align: center;
        }
        .form-box {
          padding: 0 50px;
          margin-top: 20px;
          .form-btn-group {
            display: flex;
            .form-start {
              flex: 1;
              justify-content: flex-start;
            }
            .form-end {
              flex: 1;
              display: flex;
              justify-content: flex-end;
            }
          }
          .form-submit {
            display: flex;
            justify-content: center;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>