vu3-15

现在把共享数据userInfo和后台数据库数据进行绑定，修改src\store\UserInfo.ts文件

import { defineStore } from 'pinia'//defineStore函数可以帮我们定义共享数据
import _axios from '../api/request'
import { UserInfoDto } from '../model/Model8080'
//useUserInfo是用来获取共享数据的函数
export const useUserInfo = defineStore('userInfo', {//userInfo是给共享数据自定义的名称
    state: () => {
        return { username: 'zhang', name: '张三', sex: '男' }//返回的是共享数据的初值
    },
    // 通过actions给store定义方法
    actions: {
        // get是从后台数据库获取数据
        async get(username: string) {
            const resp = await _axios.get(`/api/info/${username}`)
            //this代表上面的state对象
            Object.assign(this, resp.data.data)
        },
        // update是把前端数据更新到数据库
        async update(dto: UserInfoDto) {
            await _axios.post('/api/info', dto)
            Object.assign(this, dto)
        }
    }
})

修改A6Main.vue文件

<script setup lang="ts">
onMounted(() => {
    //从后端数据库获取serverUsername对应的用户信息
    UserInfo.get(serverUsername.value)
})
</script>

修改A6P1.vue文件

async function onClick(){
  try {
    await validate()
    //把修改后的值更新到数据库
     userInfo.update(dto.value)
    // Object.assign(userInfo,dto.value)
  } catch (error) {
    
  }
}

改完之后刷新一下浏览器页面，因为不刷新页面，ts代码不会重新加载，然后测试一下