The third key part of Vuex is called actions. Actions are methods, just as mutations are, but they can perform asynchronous code within them. 

Actions receive two parameters as follows:

• The first one is a context, which is an object that holds a reference to the state, the getters, and the ability to commit mutations and dispatch other actions.
• The second (optional) parameter is user-defined; means that we can send extra information to our actions if we need it, but this can also be safely ignored.

A common pattern in Vuex-powered applications is to keep HTTP calls inside Vuex actions—that way, they can be dispatched by any component inside the application if they are needed. These HTTP calls usually modify or make use of the state, which is very convenient since we have this all available through the context. 

Let's go back to the problem at hand. We need to make a call to our /users endpoint to get the user's information. We are going to create a Vuex action called getLoggedInUser that will know how to make this call for us and will automatically commit the information it fetches to the state. 

Follow these steps:

1. Since we will be using Axios for this, make sure that we first import it to main.js at the top of the file with the other import statements:

import axios from 'axios';

2. Now, create a property called actions inside the Vuex.Store configuration object; this property is also a reserved word. Inside of it, we will create our getLoggedInUser function:

getLoggedInUser(context) {
    axios.get('http://localhost:3000/user')
    .then(response => {
      context.commit('updateUser', response.data);
    });
  },

Remember that Axios returns a JavaScript promise, so we will attach a .then block to our call in which we will commit our updateUser mutation with the data of the response. This data is exactly the one that we defined earlier in Mockoon as a JSON object. Keep in mind that a real-life application would involve a more intricate process for checking whether the user is, in fact, logged-in; a common practice would be to pass in an ID, of sorts, to the endpoint, or perhaps even the backend will handle the session by passing tokens back and forth. However, this is beyond the scope of this book, so we will keep on using this fake scenario for demo purposes.

Now that we have our action ready, we need a place to dispatch it. In this case, we are going to assume that our app wants to check for the logged-in user as soon as possible, so we are going to leverage the created() hook inside our App.vue file:

1. Head to App.vue and add the created method onto the component:

created() {
 this.$store.dispatch('getLoggedInUser');
}

2. Open your browser, refresh the page, and check your Network tab on the developer tools. You'll see that, as soon as the page is loaded, our Axios call to http://localhost:3000/user is being fired, and the user's data is being loaded. If you have an error, remember to start the server on Mockoon first!
3. Before we move onto modifying our form, let's make a new <TheHeader> component to showcase the power of our new global state. Create a new file, TheHeader.vue, inside the components folder and copy the following code:

<template>
 <div class="row">
    <div class="col-12 text-right">
      <p v-if="$store.state.user">
        Welcome back, {{ $store.state.user.firstName }}!
      </p>
    </div>
  </div>
</template>

In this component, we're going to use interpolation to output $store.state.user.firstName, which, in turn, will access our global state, inside the state, and inside the user and look for the firstName property and display it here.

4. Go back to App.vue and import the component:

import 'TheHeader' from '@/components/TheHeader' 

Don't forget to declare it inside the components property, as follows:

components: { BaseInput, BaseSelect, TheHeader },

5. Finally, add our new component to the template right below the opening <div> element and check it out on the browser. You should see the name of our user being output directly from the global state:

<div id="app" class="container py-4">
    <TheHeader />
    ...

Now that you understand both actions and mutations, we can take the difficulty up a notch. In the next section, we are going to incorporate our two major libraries—Vuex and Vuelidate.