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 calling new Vuex.Store when 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, a notifications module provides some notification components and a store module 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 a notifications folder, you can Place it anywhere and imagine it is an extension of a peripheral.

Create a new state.js file in this folder as our Vuex module:

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

Then create a Notifications.vue file and import it . You would then access the $store instance variable, assuming there is a Vuex store to get the status from, and submit an addNotification:

<template>
  <p>
    </p>
<p>
      {{notification}}
    </p>
    <button>Add Hey!</button>
  
</template>

<script>
import state from "./state";

export default {
  computed: {
    notifications() {
      return this.$store.state.notifications;
    }
  },
  methods: {
    addHey() {
      this.$store.commit("addNotification", "Hey!");
    }
  }
};
</script>

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 the created hook.

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 using Notifications component, 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!