Как загрузить коллекцию пожарных в Vuex State?

Question

Моя цель - загрузить коллекцию firestore в состояние Vuex и использовать ее для нескольких страниц. Я пытался следовать:
Как получить коллекцию из firestore и установить состояние vuex при рендеринге приложения?

Я подписался на этот пост и либо что-то упустил, либо, возможно, код устарел? Я очень плохо знаком с Vuex, поэтому могу что-то делать не так, но я не уверен.

store / index. js

import Vue from 'vue'
import Vuex from 'vuex'
const db = require('../components/fbInit')


Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    categories: []
  },
  actions: {
    fetchCategories({ commit }) {
      db.collection('one').get().then(querySnapshot => {
        if (querySnapshot.empty) {
          // eslint-disable-next-line no-console
          console.log('cannot find')
          //this.$router.push('/HelloWorld')
        } else {
          this.loading = false;
          var categories = [];
          querySnapshot.forEach(doc => {
            categories.push(doc.data());
          });

          commit("setCategories", categories);
        }
      });
    }
  },
  mutations: {
    setCategories(state, val) {
      state.categories = val;
    }
  }
});

store.dispatch("fetchCategories");

export default store;

Один. vue

<template>
  <div class="flex-row justify-center ma-12">
    <ul>
      <li v-for="category in categories" :key="category.name">{{category.name}}</li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
// eslint-disable-next-line no-unused-vars

export default {
  computed: {
    categories() {
      return this.$store.state.categories;
    },

    ...mapGetters([])
  },
  methods: {
    ...mapActions(["fetchCatagories"])
  }
};
</script>

Я проверил, подключен ли пожарный депо, и отобразилось ли его содержимое. Но я получаю эту ошибку: Uncaught TypeError: db.collection не является функцией.

Мне никогда не удавалось загрузить мою коллекцию firestore в состояние хранилища Vuex и загрузить ее. Опять же, я новичок в использовании vuex, поэтому любая помощь будет принята с благодарностью

TLDR; Цель: загрузить коллекцию пожарного хранилища («One»), сохранить ее в состоянии Vuex, использовать хранилище Vuex для загрузки одних и тех же данных на нескольких страницах без необходимости вызова данных на каждой странице.

Answer 1

магазин / индекс. js

const store = new Vuex.Store({
....
getters: {
    categories (state) {
        return state.categories;
    }
},
....
});

Один. vue

export default {
....
    computed: {
        ...mapGetters(['categories'])
    },
....
}

Answer 2

const db = require('../components/fbInit') может быть вашей проблемой здесь. В моем проекте firestore / vue мой БД объявлен как:

import firebase from '../firebase';
const db = firebase.firestore();