Vuex, Vuexfire: How to get data from firestore into frontend?

200 Views Asked by At

I have some data in a firestore and want to display it in my vue app.

Firestore: enter image description here

Test.vue

<template>
  <p>{{ items }}</p>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: mapState(["items"]),

  methods: {
    getItems() {
      this.$store.dispatch("bindItems");
    },
  },

  mounted() {
    this.getItems();
  },
};
</script>

index.js

import { createStore } from "vuex";

import { firestoreAction } from "vuexfire";
import { vuexfireMutations } from "vuexfire";

import { db } from "./db";

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

  actions: {
    bindItems: firestoreAction(({ bindFirestoreRef }) => {
      return bindFirestoreRef("items", db.collection("items"));
    }),
  },

  mutations: {
    ...vuexfireMutations,
  },

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

store.subscribe((state) => console.log(state));

export default store;

To check my store, I added this line in index.js: store.subscribe((state) => console.log(state));. As it turns out, the data from firestore actually makes it to my store: enter image description here

Why is it not rendered in the frontend? What do I have to change to make it appear?


Edit. When I hardcode some data in my store and remove this.$store.dispatch("bisndItems"); from the monuted hook, the data gets rendered:

state() {
  return {
    items: {"name": "peter"},
  };
},

enter image description here

0

There are 0 best solutions below