Lazy Load a Vuex Module at Runtime using TypeScript

Share this video with your friends

Send Tweet

Sometimes we need to create modules at runtime, for example depending on a condition. We could even want to lazy load that module by using Webpack’s code splitting feature.

This lesson shows how to lazy load a Vuex module under a determined condition using TypeScript.

Raphael Saunier
Raphael Saunier
~ 3 years ago

1:46: object spread operator != (object) destructuring assignment

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Sorry to be nitpicking, but this is the second time the two are mixed up in this series.

JeremyW
JeremyW
~ 3 years ago

Hi, just a quick question. Is it okay to import(lazy load) vuex states in the router? Like so

beforeEnter: (to, from, next) => {
				import("@/store/accounts")
					.then(({ accounts }) => {
						store.registerModule("accounts", accounts);
					})
					.then(() => {
						next();
					});
			}