Vuex 및 Firebase를 사용하여 항목 편집

Vuex 및 Firebase를 사용하여 항목 편집

항목을 편집하려고 할 때 내가 무엇을 잘못하고 있는지 알 수 없습니다.구성 요소 상태 내에서 Firebase를 사용하여 작동하도록 만들 수는 있지만 vuex를 사용하여 작동할 수는 없습니다.

파이어베이스 흐름:

편집할 때 오류 발생:

여기 제 코드가 있습니다.나는 내 안에서 작동하는 코드에 대해 논평했습니다.editItem방법과 작동하지 않는 내 스토어의 변형된 기능을 포함했습니다.

스토어.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) {
      database.ref(`items/${index}`).remove()
    },

    EDIT_ITEM(state, index, payload) {
      database.ref(`items/${index}`).set(payload)
    }
  },

  // actions: {

  // }
})

메인.뷰

<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="removeItem(index)">Remove</button>
        <button @click="editItem(index, item)">Edit</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import database from '../firebase' // TEST REASONS
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',
      'EDIT_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 = ''
    },

    removeItem(index) {          
      this.REMOVE_ITEM(index)
    },

    editItem(index, item) {
      const payload = {
        name: item.name,
        age: item.age,
        status: item.status
      }

      this.EDIT_ITEM(index, payload) // THIS DOESN'T
      // database.ref(`items/${index}`).set(payload) THIS WORKS //
    }
  }
}
</script>

요약하면,payload세 번째 매개 변수는 다음과 같습니다.undefined왜냐하면...

돌연변이의 함수 서명은 항상 다음과 같은 형태입니다.(state, payload)즉, 데이터가 입력되어야 합니다.Object다음과 같은 형태:

this.EDIT_ITEM({
    key: index,
    value: payload
})

그런 다음 함수 선언에서 다음을 수행합니다.

EDIT_ITEM(state, payload) {
    database.ref(`items/${payload.key}`).set(payload.value)
}

나는 단지 구분을 분명히 하기 위해 페이로드 변수 이름을 변경했고, 혼란을 가중시키지 않기를 바랍니다.

언급URL : https://stackoverflow.com/questions/50454814/edit-item-using-vuex-and-firebase