LaravelLaravel & VueJsVueJs

State Management with Vuex – codeburst

In our last lesson we built a router for your Vue.js application. Each of the routes have their own components. The protocol is to keep these as loosely coupled as possible. Data needed to be shared gets passed between components via interfaces. Now think back to our shopping cart example. This is not something you would want to be passing between components for every transition. Conversely we don’t want to end up with a clutter of data stored globally.

Enter state management. A state management library can store data centrally in our application allowing it to be accessed across components and routes. It manages changes to this state through mutations and actions ensuring all data be modified in a controlled manner. Lets take our application from our last lesson and add in a state management library. We will be focusing on Vuex here because it is tailored specifically for Vue. Start by installing Vuex in our project. Run the following command from your applications directory:

npm install vuex --save

Now create a new folder within your application’s src directory. We’ll call it store and add in a file called store.js. This will be where we store all of our state management functionality. If you have been following along since the last lesson your directory structure should look something like this:

★ READ ALSO ★  Handy Telephone Input Component For Vue.js

The store.js is going to contain our:

  • state: a single object for storing data that will be used throughout the application
  • getters: computed properties based off of data in the store
  • mutations: methods used for modifying your state

It also contains actions and modules. More on that later. For now lets look at our store.js:

import Vue from 'vue'
import Vuex from 'vuex'
export const store = new Vuex.Store({
state: {
cartItems: 0
getters: {
getItems: state => {
return state.cartItems;
mutations: {
increment (state){

Here we created a state with a value of cartItems representing how many items we currently have in the shopping cart. We have a getter for returning the number of cart items, and lastly we have a mutation for incrementing the number of items in the cart. The next step is to import our store into our Vue app and include it in our Vue instance. Update your main.js from your src directory:

// other import statements
import { store } from './store/store'
new Vue({
el: '#app',
store: store,
components: { App },
template: '<App/>'

This exposes the store to our other components. These components will have access to the core data, any getters, as well as mutations. With our store in place and added into our instance we can now reference it in our components. Note that this does not preclude us from using values from the local state. Here is what our modified component looks like in Test.vue

export default {
name: 'Test',
data () {
return {
name: 'John Smith',
city: 'Charlotte, NC'
computed: {
getCounter() {
return this.$store.getters.getCounter;
created: function(){

Note the computed and created methods. In order to access the store we created in the earlier steps we need to reference:


Also, quick sidebar, created is what we call a lifecycle hook. Lifecycle hooks make it convenient for us execute some bit of code when a component is initialization (created, updated, mounted), updated, or destroyed.

With this in place we can now make reference to these functions in the template just the same as in our previous lesson:

<p> Welcome {{name}} from {{city}} </p>
<p> Number of are: {{getCounter}} </p>

From there you can add other references to state in your remaining components easily keeping data synced up throughout your application. Our Vue DevTools have a Vuex tab that gives us transparency into the state and all of it’s respective interfaces.

Having the ability to manage state across components in your application is critical to building scalable code. I hope this grounds you on how state is managed in Vue and gets you off to a good start. As always I encourage questions / feedback in the comments and on twitter @ignoreinution.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.