pinia 重置状态插件
一、前言
测试提出,登出登录后,再次进入页面后。页面的查询项非初始状态。检查后发现,是因为查询项的值存到了store呢,从store中获取,故需要一个重置store的方法
二、pinia
查阅pinia官网后,发现pinia提供了一个reset方法可以重置状态。官网位置:重置状态
重置状态
您可以通过调用 store 上的 $reset() 方法将状态 reset 到其初始值:
const store = useStore()store.$reset()
但是实操发现,直接调用报错
pinia.js?v=0f025a7f:1058 Uncaught (in promise) Error: 🍍: Store "data" is built using the setup syntax and does not implement $reset(). at Proxy.$reset (pinia.js?v=0f025a7f:1058:13)
原因:Pinia 提供的 $reset 方法仅适用于使用 options 语法(即 state 选项)定义的 store,对于使用 setup 语法定义的 store不适用,需要手动实现状态重置功能。
三、解决方案
手动赋值每个状态不优雅,故考虑使用pinia的插件,为pinia扩展一个reset方法
- 创建pinia插件
// src/store/plugins/piniaResetPlugin.js
export function createResetPlugin() {return ({ store }) => {// 保存初始状态的副本const initialState = JSON.parse(JSON.stringify(store.$state))// 定义 reset 方法store.$reset = () => {store.$patch(initialState)}}
}
- 注册pinia插件
// src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { createResetPlugin } from './store/plugins/piniaResetPlugin'const app = createApp(App)const pinia = createPinia()
// 注册插件
pinia.use(createResetPlugin())app.use(pinia)
app.mount('#app')
- 使用
$reset方法
<template><button @click="handleLogout">Logout</button>
</template><script>
import { useDataStore } from '@/store/interface/data'
import { useAuthStore } from '@/store/auth' // 假设有一个 auth store 用于处理登录export default {setup() {const dataStore = useDataStore()const authStore = useAuthStore()const handleLogout = async () => {await authStore.logout()// 调用 reset 方法dataStore.$reset()// 其他登出逻辑this.$router.push('/login') // 例如,重定向到登录页}return {handleLogout}}
}
</script>
一个完整的插件开发,注册,使用的流程就完成啦
四、总结
通过创建一个适用于 setup 语法的 Pinia 插件,可以更优雅地为所有 stores 添加 reset 方法。这种方法确保状态重置功能在 setup 语法的 store 中也能正常工作。
相关文章:
pinia 重置状态插件
一、前言 测试提出,登出登录后,再次进入页面后。页面的查询项非初始状态。检查后发现,是因为查询项的值存到了store呢,从store中获取,故需要一个重置store的方法 二、pinia 查阅pinia官网后,发现pinia提…...
一千题,No.0049(跟奥巴马一起编程)
美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统。2014 年底,为庆祝“计算机科学教育周”正式启动,奥巴马编写了很简单的计算机代码:在屏幕上画一个正方形。现在…...
《python程序语言设计》2018版第5章第46题均值和标准方差-上部(我又一次被作者的出题击倒)
第N次被作者打倒了,第5章46题解题上集的记录 计算均值的代码段 step_num 0num_c 0 pow_c 0 while step_num < 10:a eval(input("Enter number is: "))num_c apow_c pow(a, 2)step_num 1 t2 num_c / 10这个结果和书里的答案差一点。书里写的是…...
自己做的精灵图制作,图片合成,卓宠,窗口置顶,磁力链下载等工具软件
欢迎使用和提bug,才v1.0.2,有新奇的自己需要的功能可以提给我,我看看能不能做。 网站地址 github...
C++协程
什么是协程 协程(Coroutine)是程序组件,可以在执行过程中暂停并在稍后继续执行。与传统的子例程(如函数或过程)不同,子例程一旦调用,必须等其返回后才能继续执行调用它的代码。协程则可以在执行…...
linux系统——ping命令
ping命令可以用来判断对远端ip的连通性,可以加域名也可以加公共ip地址 这里发送出56字节,返回64字节...
vue3第三十七节(自定义插件之自定义指令)防重指令
引言:自定义指令,我们可以通过插件的形式进行全局注册: 例如:在提交按钮请求接口时候,为了防止重复提交,而导致的请求资源浪费,或者是新增提交时候,防止新增相同的数据。 我们的全局…...
面试高频问题----5
一、线程池参数的执行顺序 1.如果线程池中的线程数量小于核心线程数,则创建新的线程来处理任务 2.如果线程池中的线程数量等于核心线程数,但工作队列未满,将任务放入工作队列中执行 3.如果工作队列已满,但线程数小于最大线程数…...
计算机网络 —— 网络层(子网掩码和子网划分)
计算机网络 —— 网络层(子网掩码和子网划分) 网络地址转换NAT子网掩码和子网划分举个例子第一步:看类型第二步:从主机号开始比对第三步:去头去尾 我们今天来看子网掩码和子网划分: 网络地址转换NAT 网络…...
2024 IDEA最新永久使用码教程(2099版)
本篇文章我就来分享一下2024年当前最新版 IntelliJ IDEA 最新注册码,教程如下,可免费永久,亲测有效,适合Windows和Mac。 本教程适用于 J B 全系列产品,包括 Pycharm、IDEA、WebStorm、Phpstorm、Datagrip、RubyMine、…...
http协议,tomcat的作用
HTTP 概念:Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则。 特点: 1.基于TCP协议:面向连接,安全 2. 基于请求-响应模型的:一次请求对应一次响应 3HTTP协议是无状态的协议:对于事务处理没有记忆能…...
有哪些针对平台端口的常见攻击手段
针对平台端口的攻击可以通过多种手段进行,这些手段涵盖了从扫描探测到利用漏洞入侵的整个过程。以下是一些常见的攻击手段及其简要描述: 端口扫描攻击: 攻击者使用端口扫描工具(如Nmap)探测目标系统开放的端口。通过分…...
Xcode下载安装
1.Xcode可用版本判断: 2.Xcode下载安装: 方案1:AppStore 下载更新 若方案1失败则 方案2:指定版本Xcode包下载解压安装 苹果下载 3.Xcode命令行工具插件安装 xcode-select --install 备注: xcode_x.x.x.xip(压缩包存在时效性(使用前24h/…...
【 k8s 标签与选择器 】
一、标签(Label) 用于给Kubernetes资源(如Pod、Service、Deployment等)打上自定义的键值对标识。以便更方便地管理和操作这些资源。 在各类资源的 metadata.labels 中进行配置。可以通过改配置文件的方式打标签。 apiVersion: v1…...
【模拟-BM99 顺时针旋转矩阵】
题目 BM99 顺时针旋转矩阵 描述 有一个NxN整数矩阵,请编写一个算法,将矩阵顺时针旋转90度。 给定一个NxN的矩阵,和矩阵的阶数N,请返回旋转后的NxN矩阵。 分析 模拟,写几个样例,分析一下新矩阵元素下标与原矩阵元素…...
今年618,京东和爱奇艺为大屏品质“把关”
今年618电视大战,还是打响了。 根据京东618数据显示,618开门红阶段热卖TOP10电视均为75英寸以上的大屏,拥有超高画质的MiniLED电视成交量同比增长5倍。可以看到,大屏电视逐步成为消费主流,尤其是拥有出色视听体验的高…...
NSS题目练习7
[MoeCTF 2022]baby_file 打开看见一串源代码,需要get传参传入file 题目提示php伪协议 用dirsearch扫描发现flag.php 用php伪协议查看,回显一串base64编码 解码后得到flag [鹤城杯 2021]Middle magic 读取这两个文件 一个php正则表达式 补充:…...
聊一聊大数据需求的流程
大致的流程:需求对接、口径梳理、数据开发、任务发布、任务监控、任务保障 流程图 startuml skinparam packageStyle rectangleactor 需求方 participant 数据BP as 数据组 participant 离线数仓 participant 实时数仓需求方 -> 数据组: 提出需求 数据组 -> …...
老黄一举揭秘三代GPU!打破摩尔定律,打造AI帝国,量产Blackwell解决ChatGPT全球耗电难题
近日,老黄手持Blackwell向全世界展示的那一刻,全场观众沸腾了。 这是迄今为止世界上最大的芯片! 用老黄的话来说,它是「全世界迄今为止制造出来的最复杂、性能最高的计算机。」GPT-4o深夜发布!Plus免费可用!…...
HTML静态网页成品作业(HTML+CSS)—— 家乡南宁介绍网页(2个页面)
🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有2个页面。 二、作品演示 三、代…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中,压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言,提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
