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...