Firebase Vuex에서 항목 제거

Firebase Vuex에서 항목 제거

Vue는 처음이라 Firebase로 심플한 CRUD 애플리케이션을 구축하여 Veux를 배우고 싶었습니다.지금까지 파악해 왔지만(코드에 문제가 있는 것이 있으면 피드백해 주시면 감사하겠습니다) 아이템을 삭제하는 방법을 알 수 없습니다.가장 큰 문제는 제가 그것을 제대로 참조할 수 없다는 것입니다.나 이제...[object Object]내 참조 경로에서 로그 기록 시 올바른 ID를 얻을 수 있습니다.

파이어베이스 흐름:

그래서 제가 언급하고 있는 것은'items'Firebase는 각 항목에 대해 하나의 키를 생성하고, 나는 그것을 참조할 수 있도록 id에 추가했지만, 키로 참조할 수도 있었다.

Veux를 사용하지 않고 컴포넌트 상태만으로 이 작업을 수행할 수 있었습니다만, 몇시간 동안 무엇을 잘못하고 있는지 알아내려고 노력했습니다.

이 에러도 표시됩니다.

Store.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: {

  // }
})

Main.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>

돌연변이의 첫 번째 인수는 항상 상태입니다.

초기 코드:

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

index스테이트 오브젝트이기 때문에[object Object]를 참조해 주세요.

문제를 해결하려면 개체를 변환에 전달하고 다음과 같이 변경합니다.

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

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

언급URL : https://stackoverflow.com/questions/50439798/remove-item-from-firebase-vuex