• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Create a Centralized Data Store With Vuex

Log in or subscribe for free to enjoy all this course has to offer!

What is Vuex?

Vuex is a state management pattern and library for Vue.js applications. In other words, the sole purpose of Vuex is to help create a centralized data store that will serve as the single source of truth for an application.

Installing Vuex

With the amazing Vue CLI tool, adding Vuex to a project is as simple as running the following command in your terminal:

vue add vuex

When Vue CLI has finished adding Vuex to your application, you should see a similar output in your terminal:

The screen says
The output in your terminal

And with that, Vuex is installed in your application. That was easy, right? Let's see what changes it has made to our app.

src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')

When you look at our main.js file, you will notice that the plugin has introduced the  store  as a new configuration on our Vue instance. Similar to how we would configure a  data  property to setup a new data store, think of this  store  property as the global data store that we'll be configuring with Vuex.

Let's take a look at the file where all the Vuex magic is happening:  src/store.js.

Introducing store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})

As you look at  store/index.js  , you'll notice a new line of code that we have not run across yet:

Vue.use(Vuex)

This syntax is used for Vue's plugin system. This method allows you to add global functionality to a Vue instance. And since our goal is to add a global data store to our app, the plugin system is perfect for adding Vuex.

Next, similar to how we set up a new Vue instance with  new Vue(), Vuex is set up with the  new Vuex.Store(). And just like a new Vue instance, you can pass it configuration options as well.

Configuring Vuex

As you see in  store/index.js, initializing a new Vuex store takes a single-configuration object that contains three keys when it's scaffolded: (1) state, (2) mutations, and (3) actions.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P4C2-Begin  branch.

Instructions

  1. Add  Vuex  to the app.

  2. Verify that the boilerplate for the store exists in a file like  store/index.js .

Let's Recap!

In this chapter, you learned:

  • What Vuex is: a state management pattern and library for creating a centralized data store as an app's SSoT.

  • How to install Vuex on an app.

  • How the Vuex scaffold works.

Now that we have successfully added Vuex to our project, it's time to learn how it works!

Example of certificate of achievement
Example of certificate of achievement