vue3 vite 项目中使用pinia 动态更新持久化存储persist

y东施效颦

已于 2024-01-30 11:52:36 修改

阅读量969

点赞数 7

文章标签：前端 javascript 开发语言

于 2024-01-30 11:50:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51127384/article/details/135929555

版权

文章讲述了如何在Vue.js的Pinia状态管理库中，通过actions方法更新userState并实现状态的持久化存储，包括登录、获取角色信息和退出功能的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、我的目的，我需要在pinia 中调用了actions 的方法后动态的去更新userState持久化存储
src\store\modules\user.ts

import { defineStore } from 'pinia'
import { getUserInfo, loginRegister } from '@/api/login'
export const useUserStore = defineStore({
  // id: 必须的，在所有 Store 中唯一
  id: 'userState',
  // state: 返回对象的函数
  state: () => ({
    // 登录token
    token: null,
    // 登录用户信息
    userInfo: {},
    // 角色
    roles: localStorage.roles ? JSON.parse(localStorage.roles) : [],
  }),
  getters: {},
  // 可以同步 也可以异步
  actions: {
    // 登录
    login(userInfo) {
      return new Promise(async (resolve, reject) => {
        loginRegister(userInfo)
          .then(async (data) => {
            resolve(data)
            this.token = data.data
            if (this.token) {
              let userData = await this.getRoles()
              this.userInfo = userData
            }
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    // 获取用户授权角色信息，实际应用中 可以通过token通过请求接口在这里获取用户信息
    getRoles() {
      return new Promise((resolve, reject) => {
        getUserInfo().then((data) => {
          // 获取权限列表-是否是管理员
          if (data.data.isSuperAdmin) {
            this.roles = ['admin']
            localStorage.roles = JSON.stringify(this.roles)
          }   
          resolve(data.data)
        })
      })
    },
    // 退出
    logout() {
      return new Promise((resolve, reject) => {
        this.token = null
        this.userInfo = {}
        this.roles = []
        localStorage.clear();
        resolve(null)
      })
    },
  },
  // 进行持久化存储
  persist: {
    // 本地存储的名称
    key: 'userState',
    //保存的位置
    storage: window.localStorage, //localstorage
  },
})

2、调用pinia中的$patch方法

// 每次调用actions中的getRoles后，把返回的状态重新设置进行持久化存储
let userData = await UserStore.getRoles()
// 使用 UserStore.$patch() 方法来手动触发状态的更新，并将最新的状态保存到本地存储中。
UserStore.$patch((state) => {
  state.userInfo = userData
})