Чтение данных из firebase в vuex

Question

Я новичок в Vue Js. Я делаю веб-приложение TODO. Я взял FireBase в качестве бэкэнда и базы данных. Я использую Vuex для государственного управления. До сих пор я могу добавлять данные в базу данных, но когда приходит время читать, я застреваю. я не мог прочитать данные из базы данных. Это показывает пустой массив в компонент , откуда я звоню.

Это мой магазин. js

import Vue from 'vue';
import Vuex from 'vuex';
import firebase from "firebase";


Vue.use(Vuex);

export const store = new Vuex.Store({

    state:{
        events:[],
        error:''
    },

    mutations:{
        setEvent(state){
            let items = [];

            firebase.database().ref('eventos')
                .on('value',event =>{
                    event.forEach(data =>{
                        items.push(data.val())
                    })
                });

            state.events = items
        },

        setError(state, payload) {
            state.error = payload;
        },

    },

    actions:{
        addEvent(context,payload){

            firebase.database().ref('eventos/').push(payload)
                .then((event)=>{
                    context.commit('setEvent',event)
                }).catch(err =>{
                console.log(err)
            })
        },
    },

    getters:{
        eventList: state => {
            return state.events
        }
    }



});

В этом компоненте я вызываю события массива, чтобы показать все значения

<template>
    <div>
        {{eventList}}
    </div>
</template>

<script>
    export default {
        name: "ReadEvents",

        computed:{
            eventList(){
                return this.$store.getters.eventList;
            }
        }
    }

Answer 1

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

Проще всего это увидеть, поместив несколько операторов журнала:

setEvent(state){
    console.log("Before starting to load data");
    firebase.database().ref('eventos')
    .on('value',event =>{
      console.log("Got data");
    });

    console.log("After starting to load data");
},

Когда вы запускаете этот код, он регистрирует:

Перед началом загрузки данных

После начала загрузки данных

Получил данные

Хотя это, вероятно, не то, что вы Ожидается, это полностью объясняет, почему ваши данные не отображаются. К тому времени, когда вы позвоните setState, items еще не будет заполнен.

Чтобы решить эту проблему, переведите ваш setState вызов в обратный вызов on():

setEvent(state){
    firebase.database().ref('eventos')
    .on('value',event =>{
        let items = [];
        event.forEach(data =>{
            items.push(data.val())
        })
        state.events = items
    });
},

---

Вне зависимости от текущей проблемы, я настоятельно рекомендую также хранить data.key в вашем массиве, поскольку вам обязательно понадобится его в дальнейшем, когда вам нужно найти элемент из массива в базе данных.

Код для этого может быть, например:

event.forEach(data =>{
    items.push({ "$id": data.key, ...data.val() })
})

Таким образом, ключ сохраняется в $id, а все остальные свойства копируются как есть.

Answer 2

Для начала вам не следует пытаться выполнить какой-либо асинхронный код в мутациях vuex, см. https://vuex.vuejs.org/guide/mutations.html#mutations -must-be-синхронный

Вместо этого включите лог c в вашем действии, и вызывайте мутацию только тогда, когда у вас есть данные, которые вы хотите передать в состояние. Как то так:

export const store = new Vuex.Store({
    state: {
        events: [],
        error: ''
    },

    mutations: {
        setEvents (state, events) {
            state.events = events;
        },

        setError (state, payload) {
            state.error = payload;
        }
    },

    actions: {
        addEvent ({ commit }, event) {
            firebase.database().ref('eventos').push(event)
            .then(() => {
                firebase.database().ref('eventos')
                .on('value', data => {
                    const events = data.map(item => { 
                        return { "$id": item.id, ...item.val() };
                    });
                    commit('setEvents', events);
                });
            })
            .catch(err => {
                console.log(err);
            })
        },
    },

    getters:{
        eventList: state => {
            return state.events;
        }
    }
});