vu3-15

敲代码的翠花

已于 2024-01-11 01:29:32 修改

阅读量579

点赞数 6

分类专栏： vue3 文章标签：前端 vue3

于 2023-12-28 20:33:41 首次发布

本文链接：https://blog.csdn.net/weixin_44478828/article/details/135277376

版权

vue3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用Pinia库定义和管理共享数据userInfo，并通过axios与后台数据库交互。A6Main.vue和A6P1.vue组件展示了获取和更新用户信息的示例。

摘要由CSDN通过智能技术生成

现在把共享数据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代码不会重新加载，然后测试一下