title: How to load firestore collection to Vuex State?
body: <p>My goal is to load a firestore collection into the Vuex state and use it for multiple pages. I was trying to follow :<br>
  <a href="https://stackoverflow.com/questions/50942596/how-to-get-collection-from-firestore-and-set-to-vuex-state-when-the-app-is-rende">How to get collection from firestore and set to vuex state when the app is rendered?</a> </p>
  
  <p>I followed this post and either I am missing something or possibly the code is outdated? I am very new to Vuex so I could be doing something wrong but I am not sure.</p>
  
  <p><strong>store/index.js</strong></p>
  
  <pre><code>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 =&gt; {
          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 =&gt; {
              categories.push(doc.data());
            });
  
            commit("setCategories", categories);
          }
        });
      }
    },
    mutations: {
      setCategories(state, val) {
        state.categories = val;
      }
    }
  });
  
  store.dispatch("fetchCategories");
  
  export default store;
  </code></pre>
  
  <p><strong>One.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="flex-row justify-center ma-12"&gt;
      &lt;ul&gt;
        &lt;li v-for="category in categories" :key="category.name"&gt;{{category.name}}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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"])
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I tested to see if the firestore is connected and it displayed its contents. But I am getting this error:            Uncaught TypeError: db.collection is not a function.</p>
  
  <p>I have never been able to load my firestore collection into the Vuex store state and load it. Again I am new to using vuex so any help will be greatly appreciated</p>
  
  <p>TLDR; Goal: Load firestore collection('One'), Store it in Vuex state, Use Vuex store to load the same data on multiple pages without having to call the data on every page.</p>