Now that we know what Vuex is, how to create a store, dispatch mutations, and how to use getters and actions, we can install the store in our applications and use it to finalize their data flow and communication chain.

You can find the applications to work on in the following folders:

Do not forget to run npm install on both applications.

Start by installing vuex and define the necessary directory and file structure in both applications.

To install vuex, just run the following:

npm install vuex --save 

After installing vuex, create a subfolder vuex in each of the application's src folders. In this folder, create four files: store.js, mutation_types.js, actions.js, and getters.js.

Prepare the store.js structure:

//store.js 
import Vue from 'vue' 
import Vuex from 'vuex' 
import getters from './getters' 
import actions from './actions' 
import mutations from './mutations' 
 
Vue.use(Vuex) 
 
const state = { 
} 
 
export default new Vuex.Store({ 
  state,  
  mutations,  
  getters,  
  actions 
}) 
 

Import and use the store in the main App.vue:

//App.vue 
<script> 
  <...> 
  import store from './vuex/store' 
 
  export default { 
    store, 
    <...> 
  } 
</script> 

We will now define which is the global and which is the local state in each of the applications, define what data and binding are missing, divide the data, and add all the missing stuff using what we've just learned.