如何在 Vue 3 中实现 PUT 请求

Question

我正在尝试实现对https://crudcrud.com/ REST API 的 PUT 请求。 我有一个用户列表，当我单击更新按钮时，我想显示一个模式并允许用户更新任何字段（名称、电子邮件、图像 URL）。主要担心的是我正在为如何格式化 PUT 请求而苦苦挣扎。

这是我目前的解决方案

// template (UserCrud.vue)
<button @click="update(user._id)">Update</button>

// script
components: { Create },
  setup() {
    const state = reactive({
      users: [],
    })

    onMounted(async () => {
      const { data } = await axios.get(`/users`)
      state.users = data
    })

    async function update(id) {
      await axios.put(`/users/${id}`)
      state.users = ???
    }


    return { state, destroy, addUser }

这是一些示例数据：

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

作为参考，这是我使用 POST 方法创建新用户的方式：

export default {
  components: { Modal },
  emits: ['new-user-added'],
  setup(_, { emit }) {
    const isModalOpen = ref(false)
    const state = reactive({
      form: {
        name: '',
        email: '',
        avatar: '',
      },
        })
        
    async function submit() {
      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 }
  },
}

查看此repo 以获得完整的 repo：文件是 UserCrud.vue 和 Create.vue

Answer 1

您应该将用户对象作为参数传递，然后通过将 id 设置为参数将其作为 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
    }

您可以使用相同的代码添加新用户进行更新，方法是定义一个名为editMode 的属性，该属性在更新模式下具有true，并且基于此属性您可以执行正确的请求

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