vu3-14

第一个需求是在用户登录成功之后,在主页显示用户的真实姓名和性别,这些信息要调用后端API获取数据库里面的信息,第二个需求是点击菜单1,在表单中修改用户信息之后,更新到后端数据库,然后在主页同步更新用户信息

这时候就有一个问题,菜单1对应的组件和主页不在同一个组件,那要在不同组件之间共享数据,就要用到pinia。

安装pinia:npm install pinia

安装完之后,修改src\main.ts文件

原main.ts文件

import { createApp } from 'vue'
import 'ant-design-vue/dist/reset.css'
import antd from 'ant-design-vue'
// import './style.css'
import App from './views/A6.vue'
import router from './router/a6router'
createApp(App). use(antd).use(router).mount('#app')

修改之后

import { createApp } from 'vue'
import 'ant-design-vue/dist/reset.css'
import antd from 'ant-design-vue'
// import './style.css'
import App from './views/A6.vue'
import router from './router/a6router'
import {createPinia} from 'pinia'
// createApp(App). use(antd).use(router).mount('#app')createApp(App). use(antd).use(router).use(createPinia()).mount('#app')

新建src\store\UserInfo.ts文件

import { defineStore } from 'pinia'//defineStore函数可以帮我们定义共享数据
import _axios from '../api/request'
//useUserInfo是用来获取共享数据的函数
export const useUserInfo = defineStore('userInfo', {//userInfo是给共享数据自定义的名称state: () => {return { username: 'zhang', name: '张三', sex: '男' }//返回的是共享数据的初值}
})

在src\views\A6Main.vue文件中添加代码

<template><div class="a6main"><a-layout><a-layout-header><span>{{ serverUsername }} 【{{ UserInfo.name }} -{{ UserInfo.sex }}】</span></a-layout-header><!-- 其他代码 --></a-layout></div>
</template>
<script setup lang="ts">
import { useUserInfo } from '../store/UserInfo'
//UserInfo底层是用reactive包装的数据
const UserInfo = useUserInfo()
/* 其他代码
*/
</script>
<style>
/* 其他代码 */
</style>

完成之后,主页显示如下

如果想在菜单1对应的路由组件里使用UserInfo共享数据,修改src\views\A6P1.vue文件

原文件:

<template><div class="a6p1"><h3>修改用户信息</h3><hr><a-form><a-form-item label="用户名"><a-input readonly v-model:value="dto.username"></a-input></a-form-item><a-form-item label="姓名" v-bind="validateInfos.name"><a-input v-model:value="dto.name"></a-input></a-form-item><a-form-item label="性别"><a-radio-group v-model:value="dto.sex"><a-radio-button value="男">男</a-radio-button><a-radio-button value="女">女</a-radio-button></a-radio-group></a-form-item></a-form></div>
</template>
<script setup lang="ts">
/* 其他代码
*/
</script>
<style>
/* 其他代码 */
</style>

修改后:

<template><div class="a6p1"><h3>修改用户信息</h3><hr><a-form><a-form-item label="用户名"><a-input readonly v-model:value="dto.username"></a-input></a-form-item><a-form-item label="姓名" v-bind="validateInfos.name"><a-input v-model:value="dto.name"></a-input></a-form-item><a-form-item label="性别"><a-radio-group v-model:value="dto.sex"><a-radio-button value="男">男</a-radio-button><a-radio-button value="女">女</a-radio-button></a-radio-group></a-form-item></a-form></div>
</template>
<script setup lang="ts">
import { useUserInfo } from '../store/UserInfo'
//UserInfo底层是用reactive包装的数据
const UserInfo = useUserInfo()
onMounted(() => {Object.assign(dto.value, userInfo)
})
/* 其他代码
*/
</script>
<style>
/* 其他代码 */
</style>

修改后效果如下图:

那怎么把A6P1组件里面的姓名和性别修改之后,主页的用户数据也同步更新呢,修改A6P1组件代码

原文件:

<template><div class="a6p1"><h3>修改用户信息</h3><hr><a-form><a-form-item label="用户名"><a-input readonly v-model:value="dto.username"></a-input></a-form-item><a-form-item label="姓名" v-bind="validateInfos.name"><a-input v-model:value="dto.name"></a-input></a-form-item><a-form-item label="性别"><a-radio-group v-model:value="dto.sex"><a-radio-button value="男">男</a-radio-button><a-radio-button value="女">女</a-radio-button></a-radio-group></a-form-item></a-form><a-button type="primary" @click="onClick">确定</a-button></div>
</template>
<script setup lang="ts">
import { Form } from 'ant-design-vue';
import {useUserInfo} from '../store/UserInfo'
import {ref,onMounted} from 'vue'
const userInfo= useUserInfo()
const dto = ref({username:'',name:'',sex:''})
const rules = ref({name:[{required:true,message:'姓名必填'}]})
const {validateInfos,validate} = Form.useForm(dto,rules)
async function onClick(){try {await validate()// userInfo.update(dto.value)//Object.assign(userInfo,dto.value)} catch (error) {}
}
onMounted(()=>{
Object.assign(dto.value,userInfo)
})
</script>
<style scoped>
.a6p1 {height: 100%;background-color: rgb(255, 236, 220);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='24' y='12' font-size='14' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3EA6P1%3C/text%3E%3C/svg%3E");padding: 20px;box-sizing: border-box;
}
.ant-input, .ant-select {width: 180px;
}
h3 {margin-top: 20px;
}
</style>

修改之后:

async function onClick(){try {await validate()// userInfo.update(dto.value)//把修改之后的值赋值给dto的同名属性Object.assign(userInfo,dto.value)} catch (error) {}
}

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

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

相关文章

FA模板制作

1、链接克隆模板的制作 &#xff08;1&#xff09;安装一个全新的Windows 10&#xff0c;挂载并安装tools&#xff0c;关闭防火墙 &#xff08;2&#xff09;挂载FusionAccess_WindowsDestop_Install_6.5.1.iso后启用本地Administrator本地超管&#xff0c;切换为本地超管&am…

BeanUtils.copyProperties的用法

BeanUtils.copyProperties的用法 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一起探讨Java中一个强大且便捷的工具——BeanUtils.copyPro…

spring、springmvc、springboot、springcloud简介

spring简介 spring是什么&#xff1f; spring: 春天spring: 轻量级的控制反转和面向切面编程的框架 历史 2002年&#xff0c;首次推出spring雏形&#xff0c;interface 21框架2004年&#xff0c;发布1.0版本Rod Johnson: 创始人&#xff0c;悉尼大学&#xff0c;音乐学博士…

Nexus私服简介及搭建(Linux3.62版本)

文章目录 一、Nexus的安装1、运行程序2、查看运行日志和初始密码3、启动配置文件的修改 二、Nexus的使用1、Nexus使用流程说明2、库类型说明2.1、maven-public库配置说明2.2、maven-central库配置说明 3、用户本地配置使用maven-public库3.1、禁用了匿名访问&#xff0c;额外需…

test mock-03-wiremock 模拟 HTTP 服务的开源工具 flexible and open source API mocking

拓展阅读 test 之 jmockit-01-overview jmockit-01-test 之 jmockit 入门使用案例 mockito-01-overview mockito 简介及入门使用 PowerMock Mock Server ChaosBlade-01-测试混沌工程平台整体介绍 jvm-sandbox 入门简介 wiremock WireMock是一个流行的开源工具&#xf…

DFA 算法实现敏感词过滤

背景 项目中APP端发帖&#xff0c;评论可能包含多个关键词&#xff0c;铭感词。此时需要对该内容进行过滤处理。此前都是在客户端层面操作&#xff0c;这样不仅带来了性能的损耗&#xff0c;而且新增铭感词时&#xff0c;需要客户端重新打包上架&#xff0c;显得十分不合理。所…

浅谈企业定岗定编工作中的几点误区

定岗定编是企业人力资源管理的基础性工作&#xff0c;包括员工招聘、培训、绩效考核、薪酬福利体系设计等都需要结合定岗定编的最终结果应用。但在企业中&#xff0c;越是基础的工作越容易被忽视&#xff0c;很多时候为了完成此项工作任务&#xff0c;简化了很多必要的工作环节…

R306指纹识别模块指令系统

一&#xff1a;指令集 1. GR_GetImage 指令代码&#xff1a;01H 功能&#xff1a;从传感器上读入图像存于图像缓冲区 2. GR_GenChar 指令代码&#xff1a;02H 功能&#xff1a;根据原始图像生成指纹特征存于 CharBuffer1 或 CharBuffer2 3. GR_Match 指令代码&#xff…

记Android字符串资源支持的参数类型

参数以%开头&#xff0c;后拼接对应的参数类型名称&#xff0c;如下所示&#xff1a; <string name"tips">Hello, %s! You have some new messages.</string> 类型名称如下所示&#xff1a; s字符串格式用于插入字符串值。例如&#xff0c;"Hel…

SpringCloud(H版alibaba)框架开发教程,使用eureka,zookeeper,consul,nacos做注册中心——附源码(1)

源码地址&#xff1a;https://gitee.com/jackXUYY/springboot-example 创建订单服务&#xff0c;支付服务&#xff0c;公共api服务&#xff08;共用的实体&#xff09;&#xff0c;eureka服务 1.cloud-consumer-order80 2.cloud-provider-payment8001 3.cloud-api-commons 4.…

kubeadm来搭建k8s集群。

我们采用了二进制包搭建出的k8s集群&#xff0c;本次我们采用更为简单的kubeadm的方式来搭建k8s集群。 二进制的搭建更适合50台主机以上的大集群&#xff0c;kubeadm更适合中小型企业的集群搭建 主机配置建议&#xff1a;2c 4G 主机节点 IP …

Spring@Scheduled定时任务与SQLSERVER distinct order by的错误吞噬

目录 Scheduled 提供的调度机制 遇到错误不会抛出 数据库SQL差异 Scheduled 提供的调度机制 cronzonefixedDelayfixedDelayStringfixedRatefixedRateStringinitialDelayinitialDelayString 上面具体怎么用自己代码定位到API上去看注释说明。 遇到错误不会抛出 在SqlSe…

【力扣题解】P700-二叉搜索树中的搜索-Java题解

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【力扣题解】 文章目录 【力扣题解】P700-二叉搜索树中的搜索-Java题解&#x1f30f;题目描述&#x1f4a1;题解&#x1f…

2024年,独立建站过渡SASS建站,你准备好了吗?

在这个数字时代&#xff0c;一个充满活力的网站对于企业和个人来说都是非常重要的。独立建站是一个非常不错的选择&#xff0c;但是过渡到SASS建站可以更方便地达到成功。 SASS建站不仅为您提供业界领先的技术和创意设计&#xff0c;还可以让您轻松管理您的网站内容。同时&…

智慧园区物联综合管理平台之架构简述

总体架构 系统总体划分为物联感知系统层、 核心平台层、 综合运营服务平台和展示层四部分。 物联感知系统层 物联感知系统主要是支撑园区智能化运行的各子系统, 包括门禁系统、 视频监控系统、 车辆管理系统等。 核心平台层 核心平台层包括: 园区物联综合管理平台和园区…

x-cmd pkg | gum - 很好看的终端 UI 命令行工具

目录 简介首次用户功能特点Bubbles 与 Lip Gloss进一步探索 简介 gum 由 Charm 组织于 2022 年使用 Go 语言开发。旨在帮助用户编写 Shell 脚本与 dotfiles 时提供一系列快捷使用&#xff0c;可配置&#xff0c;可交互&#xff0c;美观的 Terminal UI 组件。 首次用户 使用 x…

[Angular] 笔记 25:指令

组件指令 (chatgpt 回答) 在 Angular 中&#xff0c;组件本身可以被视为指令&#xff0c;这种指令被称为组件指令。组件是 Angular 应用的构建块之一&#xff0c;它封装了一段具有特定功能和特性的用户界面&#xff0c;并且可以在应用中重复使用。 组件指令具有以下特征&…

代码随想Day53 | 1143.最长公共子序列、1035.不相交的线、53. 最大子序和

1143.最长公共子序列 本题和 718. 最长重复子数组 的区别就是本题不要求连续&#xff0c;所以在两个字符不相等的时候&#xff0c;逻辑不相同&#xff0c;当不相同的时候&#xff0c;需要找到dp[i-1][j]和dp[i][j-1]之间的最大值&#xff0c;因为不相等的时候需要找出退而求上…

【python爬虫】xpath使用说明

XPath 可以在XML文档中查找信息,支持HTML,可以用来提取信息。可以把标签文本看作一个树状图&#xff0c;最顶层是html&#xff0c;第二层是head和body&#xff0c;body的下面是许多div&#xff0c;每个div可以用/[属性属性名]来进一步细分&#xff0c;也可以通过/属性来获取对应…

Debezium日常分享系列之:重新选择列

Debezium系列之&#xff1a;重新选择列 一、介绍 仅 SQL 数据库连接器支持此后处理器。在某些情况下&#xff0c;由于某些源数据库的工作方式&#xff0c;当 Debezium 连接器发出更改事件时&#xff0c;该事件可能会排除特定列类型的值。例如&#xff0c;PostgreSQL 中的 TOA…