【Vue】Pinia管理用户数据

Pinia管理用户数据

基本思想:Pinia负责用户数据相关的state和action,组件中只负责触发action函数并传递参数

步骤1:创建userStore

1-创建store/userStore.js

import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {// 1. 定义管理用户数据的stateconst userInfo = ref({})// 2. 定义获取接口数据的action函数const getUserInfo = async (user) => {const res = await loginAPI(user)userInfo.value = res.result}// 3. 以对象的格式把state和action returnreturn {userInfo,getUserInfo,}
})

2-重构login.vue

import {useUserStore} from "@/stores/userStore";const userStore = useUserStore();
...
//form实例统一校验
const formRef = ref(null);
const router = useRouter();
const doLogin = () => {formRef.value.validate(async (valid) => {// valid: 所有表单都通过校验  才为true//console.log(valid)if (valid) {//console.log(form.value)const {account, password} = form.value//const res = await loginAPI({account, password});const res = await userStore.getUserInfo({account, password});//console.log(res)ElMessage({type: 'success', message: '登录成功'})router.replace({path: '/'})}})
}

步骤2:重构导航栏用户登录状态模板

重构LayoutNav.vue

<script setup>
import {useUserStore} from "@/stores/userStore";
const userStore = useUserStore();
</script><template><nav class="app-topnav"><div class="container"><ul><template v-if="userStore.userInfo.token"><li><a href="javascript:;"><i class="iconfont icon-user"></i>{{ userStore.userInfo.account }}</a></li>

步骤3:用户数据持久化

1-安装pinia数据持久化插件

npm i pinia-plugin-persistedstate

2-重构main.js

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const app = createApp(App)
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

3-重构userStore.js

export const useUserStore = defineStore('user', () => {// 1. 定义管理用户数据的stateconst userInfo = ref({})// 2. 定义获取接口数据的action函数const getUserInfo = async (user) => {const res = await loginAPI(user)userInfo.value = res.result}// 3. 以对象的格式把state和action returnreturn {userInfo,getUserInfo,}
},{persist:true
})

4-重启服务器,测试数据持久性

在这里插入图片描述

退出登录实现

基础思想:

  1. 清除用户信息
  2. 跳转到登录页

1- 新增清除用户信息action

 // 退出时清除用户信息const clearUserInfo = () => {userInfo.value = {}}

2- 组件中执行业务逻辑

<script setup>
import { useUserStore } from '@/stores/userStore'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
const confirm = () => {console.log('用户要退出登录了')// 退出登录业务逻辑实现// 1.清除用户信息 触发actionuserStore.clearUserInfo()// 2.跳转到登录页router.push('/login')
}
</script><el-popconfirm @confirm="confirm" title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消"><template #reference><a href="javascript:;">退出登录</a></template></el-popconfirm>

token相关设置

##请求拦截器携带token

基础思想:很多接口如果想要获取数据必须要带着有效的Token信息才可以,拦截器中做一次,用到axios实例的其他都可以拿到

// axios请求拦截器
http.interceptors.request.use(config => {const userStore = useUserStore();const token = userStore.userInfo.token;if(token){config.headers.Authorization = `Bearer ${token}`}return config
}, e => Promise.reject(e))

请求测试效果
在这里插入图片描述

响应拦截器处理token失效

// axios响应式拦截器
http.interceptors.response.use(res => res.data, e => {    //统一错误提示ElMessage({type: 'error',message: e.response.data.message})//401token失效处理const userStore = useUserStore();if(e.response.status === 401){userStore.clearUserInfo()router.push('/login')}return Promise.reject(e)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/27799.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 潮流周刊#56:NumPy 2.0 里更快速的字符串函数(摘要)

本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景&#xff1a;帮助所有读者精进 Python 技术&#xff0c;并增长职业和副业的收入。 本期周刊分享了 12 篇文…

大众点评js逆向过程(未完)

1、这里mtgsig已经被拼到url中 2、进入后mtgsig已经计算完&#xff0c; ir he(this[b(4326)], !1), 就是加密函数 32 次 796 1143 ->508 -> 754 -> 1151 160 注意IC这个数组 控制流平坦化进行AST 解析 AST网址

numpy.fft 与 torch.fft函数使用

本文目录 numpy.fft.fft2numpy.fft.fftntorch.fft.ffntorch.fft.fft2总结&#xff1a; numpy.fft.fft2 解释链接&#x1f517;&#xff1a;Link numpy.fft.fft2(a, sNone, axes(-2, -1), normNone) Compute the 2-dimensional discrete Fourier Transform. This function comp…

[whl]树莓派armv7l文件onnxruntime的whl所有下载地址汇总

下面onnxruntime所有版本都是树莓派armv7l平台的whl文件&#xff0c;不能用于windows,macOS或者ubuntu x86_64的系统&#xff0c;请认准文件名及其对应python版本下载。 onnxruntime版本下载地址onnxruntime-1.16.0-cp311-cp311-linux_armv7l.whl点我下载onnxruntime-1.16.0-c…

《每天十分钟》-红宝书第4版-代理与反射(二)

代理另一个代理 代理可以拦截反射 API 的操作&#xff0c;而这意味着完全可以创建一个代理&#xff0c;通过它去代理另一个代理。这样就可以在一个目标对象之上构建多层拦截网&#xff1a; foo: bar }; const firstProxy new Proxy(target, { get() { console.log(first pro…

uniapp开发微信小程序问题汇总

1. 自定义校验规则validateFunction失效 2. 微信小程序不支持<Br>换行 在 <text></text> 标签中使用\n(必须 text 标签&#xff0c;view 标签无效 ) 3. 微信小程序无法使用本地静态资源图片的解决方法 (1) 将图片上传到服务器&#xff0c;小程序访问该图片…

MySQL基础——函数和约束

目录 1函数 1.1字符串函数 1.2数值函数 1.3日期函数 1.4流程函数 2约束 2.1约束概述和演示 2.2外键约束&#xff08;表连接键&#xff09; 1函数 函数是指一段可以直接被另一段程序调用的程序或代码。 1.1字符串函数 MySQL中内置了很多字符串函数&#xff0c;常用的…

WPF界面设计

1、使用C#-WPF实现抽屉效果-炫酷漂亮的侧边栏导航菜单-SplitViewMD主题重绘原生控件的美观效果-提供源码Demo下载 码源地址&#xff1a;https://download.csdn.net/download/Prince999999/89424685 2、使用C#-WPF实现抽屉效果-菜单导航功能实现&#xff0c;常规的管理系统应该…

JVM 一些常见问题QA

GC Roots 虚拟机栈中引用的对象&#xff1b; 本地方法栈中JNI引用的对象&#xff1b; 方法区中类静态变量引用的对象&#xff1b; 方法区中常量引用的对象&#xff1b; Full GC是Minor GCMajor GC吗&#xff1f; Minor GC&#xff1a;回收年轻代&#xff1b; Major GC&…

【强化学习】gymnasium自定义环境并封装学习笔记

【强化学习】gymnasium自定义环境并封装学习笔记 gym与gymnasium简介gymgymnasium gymnasium的基本使用方法使用gymnasium封装自定义环境官方示例及代码编写环境文件__init__()方法reset()方法step()方法render()方法close()方法 注册环境创建包 Package&#xff08;最后一步&a…

描述React的组件生命周期方法,并解释它们在何时被调用。

React的组件生命周期方法分为三个阶段&#xff1a;挂载阶段&#xff08;Mounting&#xff09;、更新阶段&#xff08;Updating&#xff09;和卸载阶段&#xff08;Unmounting&#xff09;。以下是这些阶段中各个生命周期方法的描述和调用时机&#xff1a; 挂载阶段&#xff08…

Ubuntu启动之引导内核阶段

按照Linux系统从打开电源到进入系统的顺序&#xff0c;整个启动过程可分为以下阶段。 BIOS阶段&#xff0c;Ubuntu启动之BIOS阶段-CSDN博客引导程序阶段&#xff0c;Ubuntu启动之引导程序阶段-CSDN博客内核阶段&#xff0c;加载内核、初始化。进入系统&#xff0c;显示登录界面…

搭建Python虚拟环境(三):Conda

使用Conda搭建虚拟环境的详细指南 Conda 是一个开源包管理系统和环境管理系统&#xff0c;能够安装、更新、运行和管理软件包和环境。本文将详细介绍如何使用Conda搭建虚拟环境&#xff0c;包括安装Conda、常用命令、创建虚拟环境、激活虚拟环境、退出虚拟环境以及迁移虚拟环境…

Tomcat基础详解

第一篇&#xff1a;Tomcat基础篇 lecture&#xff1a;邓澎波 一、构建Tomcat源码环境 工欲善其事必先利其器&#xff0c;为了学好Tomcat源码&#xff0c;我们需要先在本地构建一个Tomcat的运行环境。 1.源码环境下载 源码有两种下载方式&#xff1a; 1.1 官网下载 https://…

时序预测 | MATLAB实现TCN-Attention自注意力机制结合时间卷积神经网络时间序列预测

时序预测 | MATLAB实现TCN-Attention自注意力机制结合时间卷积神经网络时间序列预测 目录 时序预测 | MATLAB实现TCN-Attention自注意力机制结合时间卷积神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现TCN-Attention自注意力机制结合时…

拥抱数字世界|AI在娱乐行业的应用,娱乐新纪元已到来

在蓬勃发展的全球化趋势下&#xff0c;越来越多的厂商正在批量涌入娱乐赛道&#xff0c;期待能创造新的增长奇迹。随着科技的不断发展&#xff0c;人工智能技术正日益深入各行各业&#xff0c;其中媒体和娱乐行业更是迎来了一场革命性的变革。在媒体和娱乐领域展现出了巨大的潜…

模型 商业画布

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。九块拼图&#xff0c;构建商业模式。 1 商业画布的应用 1.1 商业画布用于明确“GreenCycle”初创企业&#xff08;虚构&#xff09;的商业模式 假设有一家名为“GreenCycle”的初创…

多线程中run()和start()的区别

我们知道&#xff0c;在多线程中 Thread thread new Thread(runnable); thread.start();以及 thread.run();都可以执行runnable中run方法下的代码&#xff0c;但是二者又有所不同 下面给出一段代码用以体现二者的区别&#xff1a; 以下代码中&#xff0c;通过thread.start()启…

Scala的高级特性

Scala的高级特性 ☀小白的Scala学习笔记 目录 Scala的高级特性 1.匿名函数 2.如何把方法转化为函数 3.柯里化 1&#xff09;柯里化 2&#xff09;实例 3&#xff09;柯里化应用&#xff1a;排序 4&#xff09;练习 Tea 1.匿名函数 Scala 中的匿名函数是一种没有命名的…

可视化剪辑,账号矩阵管理,视频分发,聚合私信多功能一体化营销工具 源代码开发部署方案

可视化剪辑&#xff0c;账号矩阵管理&#xff0c;视频分发&#xff0c;聚合私信多功能一体化营销工具 源代码开发部署方案 可视化剪辑&#xff1a; 可视化剪辑开发是一种通过图形化界面和拖放操作&#xff0c;以可视化的方式进行影片剪辑和编辑的开发方法。它可以让非专业用户…