时间戳

首页 > 解决方案 > 从 vuex 中的 firebase 读取数据

javascript - 从 vuex 中的 firebase 读取数据

问题描述

我是 Vue Js 的新手。我正在做一个 TODO 网络应用程序。我将 firebase 作为后端和数据库。我正在使用 Vuex 进行状态管理。到目前为止，我能够将数据添加到 firebase，但是当阅读的时候，我被卡住了。我无法从 firebase 读取数据。它在我调用的组件中显示一个空数组。

这是我显示数组值的地方 这是我的store.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;
            }
        }
    }

标签： javascriptfirebasevue.jsfirebase-realtime-databasevuex

解决方案

数据从 Firebase 异步加载。在此过程中，您的主代码会继续运行，因此 UI 不会被阻塞。然后，一旦数据可用，就会使用该数据调用您的回调。

通过放置一些日志语句最容易看到这一点：

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，而所有其他属性都按原样复制。

推荐阅读