Vue charge dynamiquement Vuex

                                                                                                                                                                                                                                                               

Vuex est une solution performante de gestion de l'état. Cela facilite la gestion des grands Vue.js et rend l'état prévisible en exposant le magasin.

Vous connaissez probablement déjà Vuex, sinon Joshua Bemenderfer nous en donne une excellente introduction ci-dessous.

Vous pouvez définir le module de magasin Vuex comme suit :

const dogs = {
  state: {
    data: []
  },
  mutations: {
    addDog(state, dog) {
      state.data.push(dog)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    dogs
  }
});

Habituellement, une grande application aura de nombreux modules, tous les modules sont définis dans leurs propres fichiers et transmis lors de l'appel de new Vuex.Store combinés. C’est aussi ainsi que vous le gérez normalement.

Mais il peut y avoir un cas particulier où vous devez charger dynamiquement le module Vuex dans votre application pour l'étendre dans le magasin actuel.

Un exemple plus spécifique est l'écriture d'une bibliothèque de composants externes qui dépend de Vuex.

Il en va de même pour les applications réparties en plusieurs packages internes. Chaque package peut avoir ses propres composants et stockage.

Habituellement, il s'agit d'un module réutilisable courant dans une application. Par exemple, un module notifications fournit des composants de notification et un module store étend le stockage de votre application afin que l'ajout d'un nouveau module soit accessible depuis n'importe où dans votre application.

Regardons comment cela est mis en œuvre.

Ajouter dynamiquement des modules au stockage

Parce que nous utilisons les paramètres généraux de Vuex, nous créons ensuite un dossier notifications, vous pouvez le placer n'importe où, imaginez-le est une extension périphérique.

Créez un nouveau fichier state.js dans ce dossier en tant que module Vuex :

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

Créez ensuite un fichier Notifications.vue et importez-le. Vous accéderez ensuite à la variable d'instance $store, en supposant qu'il existe un magasin Vuex à récupérer pour obtenir l'état, et soumettez un addNotification :

<template>
  <p>
    <p v-for="notification in notifications">
      {{notification}}
    </p>
    <button @click="addHey">Add Hey!</button>
  </p>
</template>

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

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

Maintenant, l'idée est que lors de l'utilisation du composant, le Le module Vuex ajoutera automatiquement des notifications. De cette façon, si une application externe utilise le composant, il sera empaqueté et l'application n'aura pas besoin de se soucier de l'ajouter directement, nous pouvons donc utiliser le hook created.

Et, pour ajouter des modules Vuex de manière dynamique, nous pouvons utiliser l'attribut d'instance du magasin $store.registerModule :

import state from "./state";

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

Maintenant, lors de l'utilisation du composant Notifications, le module sera automatiquement enregistré.

Conclusions

Le stockage Vuex dans les grandes applications est organisé de manière statique à travers différents modules. Ça devrait être comme ça. Mais dans des cas très particuliers, vous devrez peut-être étendre le stockage et ajouter vous-même un module.

Tutoriel recommandé : "Tutoriel JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!