title: Vuex: this.$store.dispatch is not a function
body: <p>I'm trying to get data from firebase using Vuex. I'm communication with firebase in action, commit the data to mutations and getters will get data from state. Then I want to display state data in App.vue.</p>
  
  <p>In App.vue component, I wrote dispatch in mounted function and try to get data from Vuex. However I get error <code>"TypeError: this.$store.dispatch is not a function"</code>, and when I inspect state it says undefined. Are my actions and mutations wrote correctly? Why do I get that error?</p>
  
  <pre><code>store.js
  import Vue from 'vue';
  import Vuex from 'vuex';
  import firebase from 'firebase';
  
  Vue.use(Vuex);
  
  export default new Vuex.mapState({
      state: {
          notebooks: [],
      },
      getters: {
          getItems: (state) =&gt; {
              return state.notebooks;
          },
      },
      mutations: {
          setItems: function(state, notebooks) {
              state.notebooks = notebooks;
          },
      },
      actions: {
          async getTodos({ commit }) {
              var notebooksRef = await firebase.firestore().collection('notebooks');
              const notebookList = [];
              notebooksRef.onSnapshot((snap) =&gt; {
                  snap.forEach((doc) =&gt; {
                      let notebooks = {
                          id: doc.id,
                          notebook: doc.data(),
                      };
                      notebookList.push(notebooks);
                  });
                  commit('setItems', notebookList);
              });
          },
      },
  });
  
  </code></pre>
  
  <pre><code>App.vue
  &lt;template&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'App',
      computed: {
          notebooks: function() {         
              return this.$store.state.notebooks;
          },
      },
      mounted() {
          this.$store.dispatch('getTodos');
      },
  };
  &lt;/script&gt;
  </code></pre>
  
  <pre><code>main.js
  
  import Vue from 'vue';
  import App from './App.vue';
  import store from './store';
  import './firebase';
  
  Vue.config.productionTip = false;
  
  new Vue({
      store,
      render: (h) =&gt; h(App),
  }).$mount('#app');
  
  </code></pre>
  
  <pre><code>firebase.js
  import firebase from 'firebase';
  
  const config = {
      apiKey: '****',
      authDomain: '****',
      databaseURL: '****',
      projectId: '****',
      storageBucket: '****',
      messagingSenderId: '****',
      appId: '****',
  };
  // Initialize Firebase
  firebase.initializeApp(config);
  
  
  </code></pre>