javascript - 从 Firebase Vuex 中删除项目

Question

我是 Vue 新手，我想通过使用 firebase 构建一个简单的 CRUD 应用程序来学习 Veux。到目前为止，我已经能够解决问题(尽管如果您看到编码错误的内容，我将不胜感激任何反馈)，但我似乎不知道如何删除项目。主要问题是我无法正确引用它。我在引用路径中获取了 [object Object]，但是当我记录它时，我得到了正确的 id。

Firebase 流程:

因此，我要引用'items'，Firebase 会为每个项目生成一个唯一的键，并且我添加了一个 ID 以便能够引用它，不过我也可以通过以下方式引用它关键。

我已经能够在不使用 Veux 且仅使用组件状态的情况下做到这一点，但我已经尝试了几个小时来找出我做错了什么。

我也收到此错误:

商店.js

import Vue from 'vue'
import Vuex from 'vuex'
import database from './firebase'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: []
  },

  mutations: {
    RENDER_ITEMS(state) {
      database.ref('items').on('value', snapshot => {
        state.items = snapshot.val()
      })
    },

    ADD_ITEM(state, payload) {
      state.items = payload
      database.ref('items').push(payload)
    },

    REMOVE_ITEM(index, id) {
      database.ref(`items/${index}/${id}`).remove()
    }
  },

  // actions: {

  // }
})

主.vue

<template>
  <div class="hello">
    <input type="text" placeholder="name" v-model="name">
    <input type="text" placeholder="age" v-model="age">
    <input type="text" placeholder="status" v-model="status">
    <input type="submit" @click="addItem" />
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
        {{ item.age }}
        {{ item.status }}
        <button @click="remove(index, item.id)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uuid from 'uuid'

export default {
  name: 'HelloWorld',

  created() {
    this.RENDER_ITEMS(this.items)
  },

  data() {
    return {
      name: '',
      age: '',
      status: '',
      id: uuid(),
    }
  },

  computed: {
    ...mapState([
      'items'
    ])
  },

  methods: {
    ...mapMutations([
      'RENDER_ITEMS',
      'ADD_ITEM',
      'REMOVE_ITEM'
    ]),

    addItem() {
      const item = {
        name: this.name,
        age: this.age,
        status: this.status,
        id: this.id
      }

      this.ADD_ITEM(item)

      this.name = ''
      this.age = ''
      this.status = ''
    },

    remove(index, id) {
      console.log(index, id)

      this.REMOVE_ITEM(index, id)
    }
  }
}
</script>

Answer 1

突变的第一个参数始终是状态。

在您的初始代码中:

REMOVE_ITEM(index, id) {
  database.ref(`items/${index}/${id}`).remove()
}

index 是状态对象，这就是您在 url 中获取 [object Object] 的原因。

要解决您的问题，请将对象传递给您的突变并将其更改为:

REMOVE_ITEM(state, {index, id}) {
  database.ref(`items/${index}/${id}`).remove()
}

当您使用删除方法调用突变时，也传递一个对象:

remove(index, id) {
  console.log(index, id)

  // pass an object as argument
  // Note: {index, id} is equivalent to {index: index, id: id}
  this.REMOVE_ITEM({index, id})
}