Vue.js, vuex с облачным пожарным хранилищем Firebase, обновление внешнего интерфейса после добавления или удаления любой записи из базы данных - PullRequest
Новая
       8

Vue.js, vuex с облачным пожарным хранилищем Firebase, обновление внешнего интерфейса после добавления или удаления любой записи из базы данных

0 голосов
/ 24 октября 2018

Два вопроса

  1. Я хочу обновить внешний интерфейс после совершения какого-либо действия с моей базой данных Firestore, скажем, у меня есть коллекция элементов, которые я отображаю своему внешнему интерфейсу через получатель из магазинафайл .jsи в моем компоненте .vue у меня есть возможность добавлять, удалять или обновлять элементы, поступающие из базы данных, функциональность работает нормально, но мне нужно обновить страницу, чтобы обновления отображались в моем приложении, код нижепростой пример компонента .vue 

export default {
  //....
  
  computed:{
    items: {
      return this.$store.getters.Items 
    }
  },
  methods :{
    removeItem(id) {
      this.$store.dispatch('removeItem', id)
    }
  }
}
<template> 
<div >
  <ul v-for="item in items" :key="item.id">
    <li> {{item.name}} <button @click="removeItem(item.id)">X</button></li> 
  </ul>
    
  </div>
</template>

Вот пример моего файла store.js 

import db from 'firebase/init.js'

state: {
  items: []
},

mutations: {
  SETMENUITEMS(state, items) {
    state.items = items
  }
  REMOVEITEM(state, id) {
    state.menuItems.filter(item => {
      return item.id != id
    })
  }
},

actions: {
  //I dispatch this action  in the created life hook of my root .vue app component to have the items loaded upon initilizing the app
  fetchMenuItems({commit}){
    const menuItems = []
      db.collection('myCollection').get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            let item = doc.data()
            item.id = doc.id;
            menuItems.push(item)
          })
          commit('SETMENUITEMS', menuItems)
        })
        .catch(err => console.log(err))
  },
  removeItem({commit}, id){
    db.collection('myCollection').doc(id).delete()
      .then(() => {
        //at this point the item is already deleted from the database but since the ap didn't reload the item is still showing 
        commit('REMOVEITEM', id)
      })
      .catch(err => console.log(err.message)
  }
},

getters: {
  Items: state => state.items
}
Теперь, может кто-нибудь сказать мне, как просто удалить всю коллекцию из пожарного магазина, а также отразить результат в моем интерфейсе.

Пожалуйста, оставьте комментарий ниже для любых дальнейших разъяснений ожелаемое поведение, извините за длинный вопрос и заранее спасибо.

1 Ответ

0 голосов
/ 25 октября 2018

Я постараюсь ответить на первый вопрос.

вы делаете это в магазине, когда обещание выполнено.Я думаю, что обещание выполняется только один раз.

Попробуйте прикрепить свой код непосредственно к коллекции с помощью onSnapshot, чтобы вы могли передать наблюдателю непосредственно наблюдаемую коллекцию:

... 

actions: {
  //I dispatch this action  in the created life hook of my root .vue app component to have the items loaded upon initilizing the app
  fetchMenuItems({commit}){
    const menuItems = []
      db.collection('myCollection').onSnapshot(snapshot => {
          snapshot.forEach(doc => {
            let item = doc.data()
            item.id = doc.id;
            menuItems.push(item)
          })
          commit('SETMENUITEMS', menuItems)
        })
        .catch(err => console.log(err))
  },
  removeItem({commit}, id){
    db.collection('myCollection').doc(id).delete()
      .then(() => {
        //at this point the item is already deleted from the database but since the ap didn't reload the item is still showing 
        commit('REMOVEITEM', id)
      })
      .catch(err => console.log(err.message)
  }
},

...

об удалении всей коллекции не рекомендуется из веб-клиента, как вы можете видеть в документе: Удалить данные

...