vu3-14 - 技术栈

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

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

安装pinia:npm install pinia

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

原main.ts文件

TypeScript 复制代码

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')

修改之后

TypeScript 复制代码

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文件

TypeScript 复制代码

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文件中添加代码

TypeScript 复制代码

<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文件

原文件：

TypeScript 复制代码

<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>

修改后：

TypeScript 复制代码

<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组件代码

原文件：

TypeScript 复制代码

<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>

修改之后：

TypeScript 复制代码

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