如何在Firebase Realtime Database中删除指定request对象？

1. 在现有actions中新增删除逻辑 #

在你当前的actions对象内新增deleteRequest异步方法，代码如下：

async deleteRequest(context, payload) {
  const { artistId, requestId } = payload
  const token = context.rootGetters.token
  // 对应要删除的request节点路径，发DELETE请求即可删除该节点数据
  const response = await fetch(`https://find-artist-d3495-default-rtdb.firebaseio.com/requests/${artistId}/${requestId}.json?auth=${token}`, {
    method: 'DELETE'
  })
  const responseData = await response.json()
  if (!response.ok) {
    const error = new Error(responseData.message || '删除请求失败')
    throw error
  }
  // 同步更新本地状态
  context.commit('deleteRequest', requestId)
}

2. 新增对应mutation更新本地缓存的请求列表 #

在你的mutations对象中添加删除逻辑：

deleteRequest(state, requestId) {
  state.requests = state.requests.filter(item => item.id !== requestId)
}

3. 组件内添加删除按钮绑定事件 #

在你渲染请求列表的组件中，每个请求项对应位置添加删除按钮，绑定点击事件：

<!-- 假设你在v-for遍历requests -->
<div v-for="req in requests" :key="req.id">
  <p>{{ req.userEmail }}: {{ req.message }}</p>
  <button @click="handleDelete(req)">删除请求</button>
</div>

<script>
export default {
  methods: {
    async handleDelete(req) {
      try {
        await this.$store.dispatch('deleteRequest', {
          artistId: req.artistId,
          requestId: req.id
        })
      } catch (err) {
        alert(err.message)
      }
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Kibroman