Building a simple storage for the application state

In this recipe, you will understand the fundamentals of Vuex when building a big application. This recipe is a little unorthodox because to understand how Vuex's store work, we will manipulate it directly; you should never do that in a real application.

Getting ready

Before trying this recipe, you should complete Making two components talk with Vuex in Chapter 4, All About Components.

 

How to do it...

Create a new project based on the Webpack template with the following command run in a new directory:

vue init webpack

How you answer the question is not relevant. Run npm intall and install Vuex with npm install vuex --save or yarn add vuex if you use yarn. 

Open the  main.js file inside the src folder and add the following highlighted lines to finish installing Vuex:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template...