Using Vuex Modules Inside Components

We are at the last step in the very basic levels of building our Single Page Application! This doesn’t mean we are done by any stretch of the imagination, but we are going to complete the full circle of setting up the Single Page App, configuring the API, setting up the structure to call the API and now we will ACTUALLY call the API and utilize the Vuex module we created in the last tutorial Build A Vuex Module. We will use the Vuex module inside of a component and load the data we need for the page.

There is a lot more to this tutorial series coming up, so don’t worry! Everything piece of functionality I do on Roast And Brew I will be open sourcing and writing a tutorial for.

Step 1: Set Up The Home.vue Component

With an API driven single page application, the HTML/CSS/JS is loaded before anything else. This means that the page will have the layout and styles loaded but more data. What we will do is bind to one of the lifecycle hooks for Home page component and load the data. If you are unfamiliar with VueJS lifecycle hooks, check out: The Vue Instance — Vue.js Essentially, they are points in the rendering process of the component where you can bind certain events to.

On the homepage, we’d like to display a list of cafes, at least somewhere, so lets load up all of the cafes for now on the home route. To do this open the /resources/assets/js/pages/Home.vue page.

We will bind to the created() lifecycle hook which gets called when the component has been created. This is where we will dispatch actions to load the cafes.

For now add a stubbed out method to bind to the created() hook like this:

<script>
  export default {
    created(){

    }
  }
</script>

Step 2: Dispatch a Load Cafes Action

Since we need to load all of the cafes, we need to dispatch an action on our store. There are a couple ways to do this as explained in the docs: Actions · Vuex . I like to call a method on the $store variable (which is our global Vuex data store) to dispatch an action. If you look at the /resources/assets/js/modules/cafe.js file you will see all of the actions we set up in the last tutorial. We will want to load all of the cafes so we will use the loadCafes method. In our created() lifecycle hook, we need to add the following code:

this.$store.dispatch( 'loadCafes' );

What this does is use the VueJS store and dispatch the loadCafes action which will call the API, load the cafes, and save them to the cafes array in the cafe module. Now when the page loads, we will have all of our cafes loaded up as well! I’ll get into optimizing these loads in later tutorials because there’s a bunch of scenarios on navigation to determine if we re-load the cafes or not, but for now, we’ll live it as is.

Step 3: Get the Cafes Into the Component

This is the most important step, displaying the data! Unfortunately, right now, we don’t have any cafes in our database unless you are using Faker and filling in test data which is cool ( GitHub – fzaninotto/Faker: Faker is a PHP library that generates fake data for you ). We will just set this up for the next few parts of the series when we add data to our database.

With Vuex all of the getters that we set up on our module get imported into our Components as computed properties: Getters · Vuex. On the homepage, we will want to get the cafes that were loaded and we will also want the cafes load status so we can display to the user whether we are loading the cafes or not.

To do this, we will need 2 computed properties and we will add them like this to our Home.vue file:

      /*
      Defines the computed properties on the component.
    */
    computed: {
      /*
        Gets the cafes load status
      */
      cafesLoadStatus(){
        return this.$store.getters.getCafesLoadStatus;
      },

      /*
        Gets the cafes
      */
      cafes(){
        return this.$store.getters.getCafes;
      }

Now we have two computed properties we can use to display the data. Each of the methods returns the data from the getters we defined in our cafe.js Vuex module. We can now use the computed properties as we would with any type of data in our app.

Step 4: Display the Data

For now, I have no CSS styles in this app, but will just show a quick example on how to display the data. We will tell the user whether the cafes are loading and iterate over any cafes we have. Right now, personally, I haven’t added any cafes to the database so unfortunately nothing will appear. The next two articles will cover adding cafes and add a few styles so we have something to display.

To show the loading state, you could add some elements to the Home.vue template like this:

<span v-show="cafesLoadStatus == 1">Loading</span>
<span v-show="cafesLoadStatus == 2">Cafes loaded successfully!</span>
<span v-show="cafesLoadStatus == 3">Cafes loaded unsuccessfully!</span>

Each of these elements will display with the corresponding loading status of the cafes.

To list out the cafes, you can do something like this:

<ul>
    <li v-for="cafe in cafes">{{ cafe.name }}</li>
</ul>

Each cafe is an object that’s returned from the database. For more information on list rending, check out the VueJS docs here: List Rendering — Vue.js

Our Home.vue file should look like:

<style>

</style>

<template>
  <div id="home">
    <span v-show="cafesLoadStatus == 1">Loading</span>
    <span v-show="cafesLoadStatus == 2">Cafes loaded successfully!</span>
    <span v-show="cafesLoadStatus == 3">Cafes loaded unsuccessfully!</span>

    <ul>
      <li v-for="cafe in cafes">{{ cafe.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    created(){
      this.$store.dispatch( 'loadCafes' );
    },

    /*
      Defines the computed properties on the component.
    */
    computed: {
      /*
        Gets the cafes load status
      */
      cafesLoadStatus(){
        return this.$store.getters.getCafesLoadStatus;
      },

      /*
        Gets the cafes
      */
      cafes(){
        return this.$store.getters.getCafes;
      }
    }
  }
</script>

Our app loads the cafes, and displays the status of the loading. We will be styling this to make it useful, but for now it does the trick!

Conclusion

We now have everything in place and a full working system of our single page app! There are a lot more tutorials to write and features to add, but we are getting somewhere! The next tutorial, I’m going to be adding some styles to the application to make it a little more useful and then we will be adding cafes through the front end! Like I mentioned before, every feature will have a tutorial and be open sourced here: GitHub – serversideup/roastandbrew