Approach Two – Using Modules

In the previous approach, we mainly just moved lines of code into other files. As we said, while this made it easier to work on the store itself, it changed nothing about how the store was used by Vue components. Modules help us deal with complexity at the level where components come in.

Imagine a large state object containing values representing many different things, such as this one:

state: {
  name:"Lindy", 
  favoriteColor: "blue", 
  profession: "librarian", 
  // lots more values about Lindy
  books: [
    { name: "An Umbrella on Fire", pages: 283 },
    { name: "Unicorn Whisperer", pages: 501 },
    // many, many more books
  ],
  robots: {
    skill:'advanced',
    totalAllowed: 10,
    ...