0

I have a Firestore with some data in it that I bind to my vuex store:

import { createStore } from "vuex";
import { vuexfireMutations, firestoreAction } from "vuexfire";
import { db } from "./db";

const store = createStore({
  state() {
    return {
      entries: [],
    };
  },

  mutations: vuexfireMutations,

  actions: {
    bindEntries: firestoreAction(({ bindFirestoreRef }) => {
      return bindFirestoreRef("entries", db.collection("Items"));
    }),
  },

  getters: {
    entries(state) {
      return state.entries;
    },
  },
});

store.dispatch("bindEntries");
export default store;

In my component, I want to display this data. I tried using this code:

<template>
  <h3>Store Entries</h3>
  <p>{{ entries }}</p>
</template>

<script>
export default {
  computed: {
    entries() {
      console.log("Getting entries");
      console.log(this.$store.getters.entries);
      return this.$store.getters.entries;
    },
  },
};
</script>

The console shows me that I am getting the data:

enter image description here

But it does not appear:

enter image description here

Why not? What do I haveto change to make it appear?

4

0 回答 0