Approach One – Using File Splitting

The first approach, and certainly the simplest one, involves simply taking the code of your various Vuex parts (the state, the getters, and so forth) and moving them into their own files. These files can then be imported by the main Vuex Store and used as normal. Let's consider a simple example:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    name:"Lindy", 
    favoriteColor: "blue",
    profession: "librarian"
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

This is from the first exercise in Chapter 9, Working with Vuex – State, Getters, Actions, and Mutations, and is a store with only three state values. To migrate the state to a new file, you could create a new...