Using Vuex Modules Inside Components

Part 10 of 48 in API Driven Development With Laravel and VueJS
Dan Pastori avatar
Dan Pastori October 19th, 2017
⚡️ Updated content is available We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue/NuxtJS, and Capacitor.

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

Keep Reading
View the course View the Course API Driven Development With Laravel and VueJS
Up Next → Using SASS in Vue Components with Laravel Mix

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or you can buy us a beer.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We’re privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

What topics are you interested in?
Are you interested in our upcoming book?