Vue dynamically loads Vuex

Vuex is a high-performance solution for handling state management. It makes it easier to manage large Vue.js and makes state predictable by exposing the store.

You probably already know Vuex, if not Joshua Bemenderfer gives us a great introduction to it below.

You can define the Vuex store module as follows:

const dogs = { state: { data: [] }, mutations: { addDog(state, dog) { state.data.push(dog) } } } const store = new Vuex.Store({ modules: { dogs } });

Usually a large application will have many modules, all modules are defined in their own files and passed by callingnew Vuex.Storewhen combined. This is also how you normally handle it.

But there may be a special case where you need to dynamically load the Vuex module into your application to extend it into the current store.

A more specific example is to write an external component library that depends on Vuex.

The same applies to applications divided into several internal packages. Each package may have its own components and storage.

Usually, this is a common reusable module in an application. For example, anotificationsmodule provides some notification components and astoremodule extends your application storage, so that adding a new module can be done anywhere in your application access.

Let's take a look at how it is implemented.

Dynamicly add modules to the storage

Because we use the general settings of Vuex, next we create anotificationsfolder, you can Place it anywhere and imagine it is an extension of a peripheral.

Create a newstate.jsfile in this folder as our Vuex module:

export default { state: [], mutations: { addNotification(state, notification) { state.push(notification); } } };

Then create aNotifications.vuefile and import it . You would then access the$storeinstance variable, assuming there is a Vuex store to get the status from, and submit anaddNotification:

Now, the idea is , Vuex modules automatically add notifications when using components. This way, if an external application uses the component, it will be packaged in, and the application does not need to care about adding it directly, so we can use thecreatedhook.

And, in order to dynamically add Vuex modules, we can use the store's instance property$store.registerModule:

import state from "./state"; export default { // ... created() { this.$store.registerModule("notifications", state); } };

Now, when usingNotificationscomponent, the module will be automatically registered.

Wrap it up

Vuex storage in large applications is statically organized through different modules. It should be like this. But in very special cases you may need to extend the storage and add a module yourself.

Recommended tutorial: "JS Tutorial"

The above is the detailed content of Vue dynamically loads Vuex. For more information, please follow other related articles on the PHP Chinese website!