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

完成之后，主页显示如下

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

原文件：

修改后：

修改后效果如下图：

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

原文件：

修改之后：

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