自助网站建设软件,如何优化关键词提升相关度,临沂网站设计建设,网站开发需要什么基础只是第一个需求是在用户登录成功之后#xff0c;在主页显示用户的真实姓名和性别#xff0c;这些信息要调用后端API获取数据库里面的信息#xff0c;第二个需求是点击菜单1#xff0c;在表单中修改用户信息之后#xff0c;更新到后端数据库#xff0c;然后在主页同步更新用户…第一个需求是在用户登录成功之后在主页显示用户的真实姓名和性别这些信息要调用后端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文件中添加代码
templatediv classa6maina-layouta-layout-headerspan{{ serverUsername }} 【{{ UserInfo.name }} -{{ UserInfo.sex }}】/span/a-layout-header!-- 其他代码 --/a-layout/div
/template
script setup langts
import { useUserInfo } from ../store/UserInfo
//UserInfo底层是用reactive包装的数据
const UserInfo useUserInfo()
/* 其他代码
*/
/script
style
/* 其他代码 */
/style
完成之后主页显示如下 如果想在菜单1对应的路由组件里使用UserInfo共享数据修改src\views\A6P1.vue文件
原文件
templatediv classa6p1h3修改用户信息/h3hra-forma-form-item label用户名a-input readonly v-model:valuedto.username/a-input/a-form-itema-form-item label姓名 v-bindvalidateInfos.namea-input v-model:valuedto.name/a-input/a-form-itema-form-item label性别a-radio-group v-model:valuedto.sexa-radio-button value男男/a-radio-buttona-radio-button value女女/a-radio-button/a-radio-group/a-form-item/a-form/div
/template
script setup langts
/* 其他代码
*/
/script
style
/* 其他代码 */
/style
修改后
templatediv classa6p1h3修改用户信息/h3hra-forma-form-item label用户名a-input readonly v-model:valuedto.username/a-input/a-form-itema-form-item label姓名 v-bindvalidateInfos.namea-input v-model:valuedto.name/a-input/a-form-itema-form-item label性别a-radio-group v-model:valuedto.sexa-radio-button value男男/a-radio-buttona-radio-button value女女/a-radio-button/a-radio-group/a-form-item/a-form/div
/template
script setup langts
import { useUserInfo } from ../store/UserInfo
//UserInfo底层是用reactive包装的数据
const UserInfo useUserInfo()
onMounted(() {Object.assign(dto.value, userInfo)
})
/* 其他代码
*/
/script
style
/* 其他代码 */
/style
修改后效果如下图 那怎么把A6P1组件里面的姓名和性别修改之后主页的用户数据也同步更新呢修改A6P1组件代码
原文件
templatediv classa6p1h3修改用户信息/h3hra-forma-form-item label用户名a-input readonly v-model:valuedto.username/a-input/a-form-itema-form-item label姓名 v-bindvalidateInfos.namea-input v-model:valuedto.name/a-input/a-form-itema-form-item label性别a-radio-group v-model:valuedto.sexa-radio-button value男男/a-radio-buttona-radio-button value女女/a-radio-button/a-radio-group/a-form-item/a-forma-button typeprimary clickonClick确定/a-button/div
/template
script setup langts
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/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/svg%3E%3Ctext x24 y12 font-size14 font-familysystem-ui, sans-serif text-anchormiddle dominant-baselinemiddle%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) {}
}
