Large Application Patterns with Vuex Chapter 18The trick here is to load them asynchronously; Webpack will help you separate them into
smaller bundles so that they will be loaded only if and when required.
There's more...
There is an alternative syntax to import components lazily. It may become an ECMA
standard in the future, so you should be aware of it. Open index.js inside the router
directory and completely remove the import of the Massive component or the Massive
constant line we added in this recipe.
Inside the routes, try the following when specifying the component for the /massive route:
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/massive',
name: 'Massive',
component: import('@/components/Massive')
}
]This will be equivalent to what we have done before because Webpack will take the line
and instead of directly importing the code of the Massive component, it will create a
different js file, loaded lazily.
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 know how to make components talk with Vuex.