Pinia持久化失败

最新推荐文章于 2024-06-03 14:18:09 发布

Oncccce

最新推荐文章于 2024-06-03 14:18:09 发布

阅读量820

点赞数 8

分类专栏： Vue 文章标签： javascript 前端开发语言 vue typescript

本文链接：https://blog.csdn.net/qq_45415290/article/details/136635695

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了在使用Pinia和pinia-plugin-persistedstate进行状态管理时，如何在Vue组件中正确调用userStore以实现登录信息的localStorage持久化。错误示例指出需在函数内部使用useUserStore，而正确示例提供了修复后的代码。

摘要由CSDN通过智能技术生成

1. 问题描述

pinia-plugin-persistedstate持久化失败
在登录时，发现调用useLogin中的onSubmit方法，无法将userStore中的state信息保存到localStorage中，最总发现是useLogin.ts中调用useUserStore的位置不对导致的

2. 正确示例代码

2.1. Pinia代码

import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

export default pinia;

2.2.用户信息模块

import { defineStore } from "pinia";
import { login } from "@/api/auth/login/index";
import { type LoginParam } from "@/api/auth/types/ro";
import { type LoginVO } from "@/api/auth/types/vo/index";
import { type Empty, type R } from "@/common/types/common";

type UserStateType = {
  id: number | undefined;
  nickname: string | undefined;
  avatar: string | undefined;
  accessToken: string | undefined;
};

export const useUserStore = defineStore("user", {
  persist: {
    key: "user",
    storage: localStorage
  },
  state(): UserStateType {
    return {
      id: undefined,
      nickname: undefined,
      avatar: undefined,
      accessToken: undefined
    };
  },
  getters: {},
  actions: {
    async login(param: LoginParam): Promise<LoginVO | Empty> {
      const resp = await login(param);
      const payload: R<LoginVO> = resp.data;
      const { code, data } = payload;

      if (code === 10000) {
        // 登录成功
        const { id, nickname, avatar, accessToken } = data!;
        this.id = id;
        this.nickname = nickname;
        this.avatar = avatar;
        this.accessToken = accessToken;
      }

      return Promise.resolve(data);
    },
    isAuthorized(): boolean {
      return !!this.accessToken;
    }
  }
});

2.3.useLogin.ts

import { ref, reactive } from "vue";
import { useUserStore } from "@/stores/modules/user";

export default function () {
  function onSubmit(data) {
    const userStore = useUserStore();

    // request
    userStore.login(data);
  }

  return { onSubmit };
}

3. 错误代码示例

错误

import { ref, reactive } from "vue";
import { useUserStore } from "@/stores/modules/user";

// error: 在函数外调用了useUserStore() 
const userStore = useUserStore();

export default function () {
  function onSubmit(data) {
 
    // request
    userStore.login(data);
  }

  return { onSubmit };
}
``
> 正确
```typescript
import { ref, reactive } from "vue";
import { useUserStore } from "@/stores/modules/user";

export default function () {
  function onSubmit(data) {
    // 在函数内调用useUserStore()
    const userStore = useUserStore();

    // request
    userStore.login(data);
  }

  return { onSubmit };
}