10. Working with Vuex – Fetching Remote Data

Activity 10.01: Using Axios and Vuex with Authentication

Solution:

Perform the following steps to complete the activity.

Note

To access the code files for this activity, refer to https://packt.live/3kVox6M.

1. Use the CLI to scaffold a new application and be sure to enable both Vuex and Vue Router. When done, then use npm to install Axios. Now that you have got the app scaffolded, let's begin building it. First, open App.vue, the core component in the application, and modify it so that the entire template is the view:

   <template>
     <div id="app">
       <router-view/>
     </div>
   </template>

2. By default, the CLI will scaffold two views: Home and About. We are going to change About to be the view that displays cats, but for now, open Home.vue and add the login form. Use a button to run a method to perform the (fake) login:

   &lt...