Vuex: structurer de grands projets et travailler avec des modules

Vuex est une bibliothèque officielle et bien documentée de gestion de l'état des applications conçue spécifiquement pour Vue.js. L'auteur du matériel, dont nous publions la traduction aujourd'hui, estime que l'utilisation de cette bibliothèque est beaucoup plus agréable que Redux, car, d'une part, Vuex nécessite moins de code passe-partout, et d'autre part, du fait qu'elle fonctionne avec les mécanismes asynchrones, aucune bibliothèque supplémentaire n'est nécessaire ici. De plus, puisque la bibliothèque Vuex a été créée par la même équipe qui travaille sur Vue, cette bibliothèque s'intègre très bien avec ce framework. Malheureusement, en travaillant avec Vuex, vous pouvez toujours rencontrer une difficulté, qui consiste à préparer correctement la structure des projets dans lesquels vous prévoyez d'utiliser cette bibliothèque.



Dans cet article, vous trouverez une description de la méthodologie de structuration de grands projets à l'aide de Vuex, et un script conçu pour automatiser le processus de création de modules Vuex.

Vue-entreprise-passe-partout et problème de structure de projet

L'un des développeurs de Vue, Chris Fritz, a créé un excellent modèle pour Vue, la structure de projet présentée dans laquelle est conçu pour utiliser Vuex. En particulier, ce modèle permet à Vuex d'enregistrer automatiquement les modules en fonction des fichiers du dossier modules . La structure de dossiers du projet peut ressembler à la figure suivante.


Structure du projet et placement de code peu pratique

Lorsque vous utilisez ce modèle, il est nécessaire que l'état, les getters, les actions et les mutations soient dans le même fichier. Personnellement, je préfère les conserver dans des fichiers séparés, ce qui permet, étant donné que les modules Vuex sont parfois assez volumineux, il est pratique de naviguer dans les programmes, sans avoir à parcourir d’énormes morceaux de code. Suite à cette idée, nous allons changer le code du modèle afin que ce qui se rapporte aux modules individuels puisse être trié dans des dossiers destinés à ces modules. Autrement dit, la structure du projet changera et sera similaire à celle illustrée ci-dessous.


La structure du projet avec la décomposition des matériaux des modules en fichiers séparés qui se trouvent dans les dossiers des modules

Développement d'un modèle prenant en charge une structure de projet pratique

Donc, nous allons organiser le travail avec Vuex afin que nous puissions utiliser des structures de dossiers et de fichiers similaires à celles illustrées dans la figure précédente de nos projets. Pour ce faire, créez d'abord un nouveau projet à l'aide de Vue CLI 3 .

Une fois que vous avez un modèle de projet prêt à fonctionner, installez Vuex et Lodash en exécutant la commande npm install vuex lodash -save dans le terminal. Pour travailler avec des modules, nous avons besoin de la fonction camelCase de Lodash, qui est conçue pour convertir les chaînes en style camel.

Créez maintenant un dossier et une structure de fichiers similaires à celle illustrée dans la figure précédente.

Commençons par le fichier store.js . Voici son code:

 import Vue from 'vue' import Vuex from 'vuex' import modules from './modules' Vue.use(Vuex) const store = new Vuex.Store({ modules, strict: process.env.NODE_ENV !== 'production' }) //    `init`     for (const moduleName of Object.keys(modules)) { if (modules[moduleName].actions.init) {   store.dispatch(`${moduleName}/init`) } } export default store 

Vue et Vuex sont importés ici, car nous ne pouvons pas nous en passer. De plus, nous importons des modules depuis /modules/index.js . Ensuite, nous initialisons le stockage et parcourons tous les modules. Si le module a une action init , nous initialisons le module. Cela s'avère très utile pour les modules qui doivent être initialisés au démarrage de l'application. En conséquence, bien sûr, nous exportons le store , après quoi, généralement, il est importé dans le fichier main.js et ajouté à l'instance Vue.

Il est maintenant temps de travailler avec le fichier index.js , qui se trouve dans le dossier /store/modules .

 //    Vuex     ,    . import camelCase from 'lodash/camelCase'; //    const requireModule = require.context( //      '.', //     true, //   index.js,    ,    //   'actions', 'mutations',  'getters' . //  ,      .js /^(?!.*(actions|mutations|getters|index)).*\.js$/ ); const modules = {}; requireModule.keys().forEach(fileName => { //     if (/\.unit\.js$/.test(fileName)) return; //            modules[camelCase(fileName.split('/')[1].replace(/(\.\/|\.js)/g, ''))] = {   namespaced: true,   ...requireModule(fileName).default }; }); export default modules; 

Dans ce code, nous importons d'abord la fonction camelCase de Lodash. Ensuite, nous utilisons la méthode require.context pour connecter les modules. En tant que troisième paramètre, nous y passons une expression régulière qui filtrera le fichier index.js , ainsi que les fichiers dont les noms contiennent les actions lignes, les mutations et les getters . Ils seront importés dans le fichier d'état, par exemple, dans auth.js , puis exportés. Par exemple, voici à quoi auth.js fichier auth.js dossier src/store/modules/auth/ au début du travail:

 import actions from './actions'; import mutations from './mutations'; import getters from './getters'; const state = {   user: null }; export default {   state,   mutations,   getters,   actions }; 

Il ne reste plus qu'à parcourir tous les modules et à former un seul objet avec chacun d'eux. Ici, vous devez exclure tous les fichiers au nom desquels il existe une unit ligne, car ils ne sont nécessaires que pour les tests, et non pour le développement ou pour le déploiement d'un projet en production. Après cela, nous ajoutons une nouvelle propriété à l'objet modules , qui aura le nom du fichier d'état, par exemple, auth ou users . De plus, nous utilisons la fonction camelCase pour rendre les noms de propriété cohérents. Ensuite, nous requireModule l'objet modules , en parcourant le requireModule et en utilisant la construction ...requireModule(fileName).default , puis exportons les modules .

En fait, c'est ainsi qu'un projet peut être structuré dans quel état, getters, actions et mutations sont stockés séparément et organisés de manière pratique. Voyons maintenant comment écrire un script pour créer automatiquement des modules Vuex.

Script pour créer automatiquement des modules Vuex

Créez un nouveau dossier dans le dossier du projet avec les scripts nom, créez-y le fichier generateVuexModule.js . Pour ce projet, nous aurons besoin de Node.js, donc si vous n'avez pas installé cette plate-forme, il est maintenant temps de la réparer . Notre script n'a qu'une seule dépendance - le paquet de chalk , qui est utilisé pour concevoir les matériaux affichés dans la console. Vous pouvez installer ce package avec la commande npm install -save-dev chalk .

▍Étape 1

Dans le fichier generateVuexModule.js , vous devez connecter trois modules: fs , path et chalk . Ici aussi, vous avez besoin d'une constante avec le chemin d'accès au dossier des modules ( src/store/modules ) et d'une autre constante - args , qui récupérera les arguments transmis au script lors de son exécution.

 const fs = require('fs'); const path = require('path'); const chalk = require('chalk'); const modulesPath = 'src/store/modules'; const args = process.argv.slice(2); const error = (...args) => { console.log(chalk.red(...args)); }; const success = (...args) => { console.log(chalk.green(...args)); }; if (!args.length) { error('You must provide a name for the module!'); return; } 

Comme vous pouvez le voir, nous écrivons tous les arguments dans les arguments à l'exception des deux premiers, car ils représentent le chemin d'accès à node.exe et le fichier de script, et nous n'avons pas besoin de ces informations. Nous ne sommes intéressés que par le troisième paramètre - le nom du nouveau module. En outre, il existe quelques fonctions, error et success , qui utilisent le paquet de chalk susmentionné pour afficher des messages avec des textes de différentes couleurs.

Ici, vous devez vérifier la longueur du tableau args afin de savoir si le nom du module est passé à notre script, et si ce n'est pas le cas, donner un message d'erreur. Par conséquent, si vous essayez d'exécuter ce script à l'aide de la commande node generateVuexModule.js , sans lui transmettre quoi que ce soit d'autre, vous verrez un message d'erreur dans le terminal.

▍Étape 2

À ce stade, nous avons un nom pour le module et le chemin d'accès donné par la constante modulesPath . Cependant, nous devons encore travailler avec ces données. À savoir, extraire le nom du tableau args et collecter le chemin complet vers le module, sans parler de la formation de son contenu.

 const moduleName = args[0]; const modulePath = path.join(__dirname, '../', modulesPath, moduleName); if (fs.existsSync(modulePath)) { error(`${moduleName} directory already exists!`); return; } const stateContent = `import getters from './getters'; import actions from './actions'; import mutations from './mutations'; const state = {}; export default { state, getters, actions, mutations }; `; const exportFileContent = `import * as types from '@/store/types'; export default { }; `; 

Le nom du module sera dans l'élément du tableau args avec l'index 0. À ce stade du programme, nous pouvons compter sur la présence de cet élément, car nous avons précédemment tenté de l'extraire de process.argv , puis vérifié la longueur du tableau args . De plus, nous avons préparé le chemin complet à l'aide du module de path et de la méthode join . Nous avons obtenu le répertoire actuel en utilisant la construction __dirname , déplacé d'un niveau vers le haut, car le fichier generateVuexModule.js se trouve dans le dossier du projet de scripts . Ensuite, nous ajoutons simplement au résultat, le contenu de la constante modulesPath et le nom du module. À ce stade, la constante modulePath doit contenir quelque chose comme pathToYourProject/project/src/store/modules/moduleName . C'est là que le module sera créé. Maintenant, puisque nous avons le chemin complet, nous pouvons vérifier si ce répertoire existe. Nous ne voudrions pas écraser accidentellement les fichiers d'un module existant. Par conséquent, si le répertoire dans lequel vous prévoyez de créer un nouveau module existe, nous afficherons un message d'erreur en lettres rouges, grâce à la chalk .


Exemple de message d'erreur

Ensuite, vous devez créer des constantes dans lesquelles il y aura des données pour les fichiers. Comme vous pouvez l'imaginer, stateContent utilisé pour le fichier d'état, c'est-à-dire, par exemple, pour auth.js , et exportFileContent est utilisé pour les getters.js , actions.js et mutations.js . Si nécessaire, vous pouvez ajouter à cette liste tout ce qui est requis dans votre projet.

▍Étape 3

Il ne nous reste plus qu'à créer des chemins pour les fichiers du module et à les créer.

 const statePath = `${path.join(modulePath, `${moduleName}.js`)}` const gettersPath = `${path.join(modulePath, 'getters.js')}` const actionsPath = `${path.join(modulePath, 'actions.js')}` const mutationsPath = `${path.join(modulePath, 'mutations.js')}` fs.mkdirSync(modulePath); fs.appendFileSync(statePath, stateContent); fs.appendFileSync(gettersPath, exportFileContent); fs.appendFileSync(actionsPath, exportFileContent); fs.appendFileSync(mutationsPath, exportFileContent); success('Module', moduleName, 'generated!'); 

Nous déclarons d'abord quatre constantes, chacune contenant un chemin pour le fichier correspondant. Ensuite, nous devons créer un dossier pour le module. Nous avons déjà vérifié si un tel dossier existe et donné une erreur si c'est le cas. Par conséquent, la création d'un dossier ne devrait poser aucun problème. Et enfin, nous utilisons les fs.appendFileSync , en plaçant les nouveaux fichiers avec le contenu spécifié dans le processus de création dans le répertoire nouvellement créé. À la fin, le script affiche un message indiquant la réussite de l'opération.

Pour utiliser ce script, accédez simplement au dossier de scripts de votre projet dans le terminal et exécutez une commande du node generateVuexModule.js yourModuleName formulaire node generateVuexModule.js yourModuleName . Une fois le script terminé, vous verrez un message sur la création d'un module.

Résumé

Après avoir examiné ce matériel, vous avez découvert un modèle pour structurer de grands projets où vous prévoyez d'utiliser Vuex, et un script qui simplifie la création de modules Vuex. Nous espérons que ces connaissances vous seront utiles. Le code du projet, dont nous avons examiné des exemples, est disponible ici .

Chers lecteurs! Comment structurez-vous les grandes applications Vue qui utilisent Vuex?