As good as Laravel already is, its capabilities is more apparent when we incorporate a frontend component to the project. The “Vue and Laravel” combination is extremely common and easy to implement. For instance, the laravel/ui package has a preset for Vue which makes things much more convenient. However, Vue can be challenging for some especially features liek routing and state management. In this tutorial, I am going to briefly describe how I pull data from Laravel and prepare them for Vue.
Before we start make sure you are already familiar with the basics as this is just a tutorial about state management. First, we will go through some of the concepts of state management in Vue.
If you look at the above image, it actually has some resemblance to the MVC structure that we are familiar with. Basically, state is model, view is view and actions is controller.
Here’s a clearer depiction of what is going on in state management. We will understand better when we look at the actual implementation of this.
Let us say we want to retrieve a list of groups from our database and display it in our vue component. It is not as simple as passing a GET request to web.php but also not as difficult as it seems. First, we need to set up file(s) for state management, for a single file state management you will need a store.js file at the root of your Javascript folder.
If you are using multiple files (optional) like what I am about to do here, you will need to create a folder named store. Inside, create a index.js file that serve as an entry point for everything state-related. Then, create the rest of the files similar to the image below.
Go to your index.js, which functions as an entry point and add these lines. The first two import lines are so we can call Vue to use Vuex for state management on line 9. From line 4–7, we import all of the components defined in the store folder. And finally on line 11, we define a new Store instance and export it with the said components. Refer to the image below
Since we want to display a list of groups, we need to define a state called “groups” in our state.js. In the file, export a groups array.
Now that we have declared a state, we can perform actions on it similar to a controller acting on a model. Let us head to our actions.js and create an action that draws data from our api. I created an loadAllGroups that sends a GET request to our api.php which will direct our request to the index method of a controller called GroupsController. Don’t worry about the “commit” for now as we will look at it in the coming sections. In the controller’s index method, return an array of the Group model just like you would in a Laravel-only project.
In the last part, you may have noticed the commit function with parameters “updateAllGroups” and “response.data”. So what this does is it takes the data (“response.data”) sent back from the api and commits to a mutation (“updateAllGroups).
Mutations governs all changes to a state. If you remember, in our state.js we defined group as an empty array. Now that we have gotten our array of groups from the api, “updateAllGroups” in mutations.js will take the data and make the changes to the state. This is known as mutation. Take a look at the image below and try to understand. The mutation takes in the state from state.js and groups which is the data we passed in from actions.js. It then takes the state’s groups state and equates it to the new groups.
For the final two steps, you will need to access app.js and the component where you will use the groups state. Since in our case, the list of groups needs to be accessible globally, which is why we will “dispatch” the loadAllGroups action in our main Vue component. Also, remember to import the store folder so we can actually use the dispatch method. Refer to the image below.
We can use the dispatch method by using this.$store. It will happen in the created() method so that the actions is performed every time the instance is created.
In our last step, we will access the component where we want to show the list of groups, in this case GroupList.vue. Simply import mapState from vuex and use it in computed and voila! You can access the state like how you would normally access a data object (e.g. {{ data.object }} ). I should note that mapState is a helper that returns states from store and it should be imported in single curly brackets like what’s shown below. You can use a spread operator if you are calling more than one thing in the computed method. Also refer to the image underneath.
