Rest 如何在Vue 3中实现PUT请求

我正在尝试实现对

https://crudcrud.com/

restapi。 我有一个用户列表，当我单击更新按钮时，我想显示一个模式，并允许用户更新任何字段（名称、电子邮件、图像URL）。主要的问题是，我正在努力解决如何格式化PUT请求

这是我目前的解决方案

//模板（UserCrud.vue）
更新
//剧本
组件：{Create}，
设置（）{
常数状态=无功({
用户：[]，
})
onMounted（异步（）=>{
const{data}=wait axios.get（`/users`）
state.users=数据
})
异步函数更新（id）{
等待axios.put（`/users/${id}`）
state.users=？？？
}
返回{state，destroy，addUser}

以下是一些示例数据：

[
  {
  "_id": "6012303e37711c03e87363b7",
  "name": "Tyler Morales",
  "email": "moratyle@gmail.com",
  "avatar": "HTTP://linkURL.com
  },
]

作为参考，以下是我如何使用POST方法创建新用户：

导出默认值{
组件：{Modal}，
发射：['new-user-added']，
设置（{emit}）{
常数isModalOpen=ref（假）
常数状态=无功({
表格：{
名称：“”，
电子邮件：“”，
阿凡达：''，
},
})
异步函数submit（）{
const{data}=wait axios.post（'/users'，state.form）
发出（'new-user-added'，数据）
state.form.email=“”
state.form.name=“”
state.form.avatar=''
isModalOpen.value=false
}
返回{isModalOpen，submit，state}
},
}

---

检查完整的repo：文件为UserCrud.vue&Create.vue

您应该将用户对象作为参数传递，然后通过将id设置为param将其作为put请求的主体发送：

<button @click="update(user)">Update</button>
...

    async function update(user) {
       let _user={...user,name:'Malik'};//example
       await  axios.put(`/users/${user._id}`,_user);
      const { data } = await axios.get(`/users`)
      state.users = data
    }

---

嗯，我仍然很困惑。假设我想手动将name属性从“Tyler”更改为“Malik”。这种逻辑会走到哪里？我可以看到DELETE如何直接从API中删除一项，但我不清楚如何放置更新。新数据来自哪里？您可以添加编辑模式来更新它们，但对于测试，您可以执行

Let\u user={…用户，名称：'Malik'}；等待axios。放置…

但您必须在模式中添加一个表单来更新所选用户，然后提交更合理的更改，但现在我无法创建新用户或更新他们。这对您来说合适吗？

和

更新

为什么不能在同一表单中执行这两个操作？您可以控制添加/编辑ba在prop

editMode

export default {
  components: { Modal },
  emits: ['new-user-added','user-edited'],
  props:['editMode','user'],
  setup(props, { emit }) {
    const isModalOpen = ref(false)
    const state = reactive({
      form: {
        name: '',
        email: '',
        avatar: '',
      },
        })
     onMounted(()=>{
           state.form=props.user;//user to edit
       }) 
    async function submit() {
     if(props.editMode){
        const { data } = await axios.put('/users/'+props.user._id, state.form)
        emit('user-edited', data)
     }else{
      const { data } = await axios.post('/users', state.form)
      emit('new-user-added', data)
      state.form.email = ''
      state.form.name = ''
      state.form.avatar = ''
    }  
    isModalOpen.value = false
    
    }
    return { isModalOpen, submit, state }
  },
}