title: Making Async Calls With Vuex
body: <p>I'm just starting to learn Vuex here. Until now I've been storing shared data in a <code>store.js</code> file and importing <code>store</code> in every module but this is getting annoying and I'm worried about mutating state. </p>
  
  <p>What I'm struggling with is how to import data from firebase using Vuex. From what I understand only actions can make async calls but only mutations can update the state? </p>
  
  <p>Right now I'm making calls to firebase from my mutations object and it seems to be working fine. Honestly, all the context, commit, dispatch, etc. seems a bit overload. I'd like to just be able to use the minimal amount of Vuex necessary to be productive. </p>
  
  <p>In the docs it looks like I can write some code that updates the state in the mutations object like below, import it into my component in the <code>computed</code> property and then just trigger a state update using <code>store.commit('increment')</code>. This seems like the minimum amount necessary to use Vuex but then where do actions come in? Confused :( Any help on the best way to do this or best practices would be appreciated! </p>
  
  <pre><code>const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    }
  })
  </code></pre>
  
  <p>My code is below</p>
  
  <p>store.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex); 
  
  const db = firebase.database();
  const auth = firebase.auth();
  
  const store = new Vuex.Store({
    state: {
      userInfo: {},
      users: {},
      resources: [],
      postKey: ''
    },
    mutations: {
  
      // Get data from a firebase path &amp; put in state object
  
      getResources: function (state) {
        var resourcesRef = db.ref('resources');
        resourcesRef.on('value', snapshot =&gt; {
            state.resources.push(snapshot.val());
        })
      },
      getUsers: function (state) {
        var usersRef = db.ref('users');
        usersRef.on('value', snapshot =&gt; {
            state.users = snapshot.val();
        })  
      },
      toggleSignIn: function (state) {
        if (!auth.currentUser) {
            console.log("Signing in...");
            var provider = new firebase.auth.GoogleAuthProvider();
            auth.signInWithPopup(provider).then( result =&gt; {
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = result.credential.accessToken;
            // The signed-in user info.
            var user = result.user;
            // Set a user
            var uid = user.uid;
            db.ref('users/' + user.uid).set({
                name: user.displayName,
                email: user.email,
                profilePicture : user.photoURL,
            });
  
            state.userInfo = user;
            // ...
            }).catch( error =&gt; {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            // The email of the user's account used.
            var email = error.email;
            // The firebase.auth.AuthCredential type that was used.
            var credential = error.credential;
            // ...
            });
        } else {
            console.log('Signing out...');
            auth.signOut();      
        }
      }
    }
  })
  
  export default store
  </code></pre>
  
  <p>main.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './App'
  import store from './store'
  
  new Vue({
    el: '#app',
    store, // Inject store into all child components
    template: '&lt;App/&gt;',
    components: { App }
  })
  </code></pre>
  
  <p>App.vue</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;button v-on:click="toggleSignIn"&gt;Click me&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import Hello from './components/Hello'
  
  
  export default {
    name: 'app',
    components: {
      Hello
    },
    created: function () {
      this.$store.commit('getResources'); // Trigger state change
      this.$store.commit('getUsers'); // Trigger state change
    },
    computed: {
      state () {
        return this.$store.state // Get Vuex state into my component
      }
    },
    methods: {
      toggleSignIn () {
        this.$store.commit('toggleSignIn'); // Trigger state change
      }
    }
  }
  
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>