Vuex: Strukturierung großer Projekte und Arbeiten mit Modulen

Vuex ist eine offizielle, gut dokumentierte Bibliothek zur Verwaltung des Anwendungsstatus, die speziell für Vue.js entwickelt wurde. Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, ist der Ansicht, dass die Verwendung dieser Bibliothek viel angenehmer ist als die von Redux, da Vuex zum einen weniger Boilerplate-Code benötigt und zum anderen aufgrund der Tatsache, dass sie funktioniert Bei asynchronen Mechanismen werden hier keine zusätzlichen Bibliotheken benötigt. Da die Vuex-Bibliothek von demselben Team erstellt wurde, das an Vue arbeitet, lässt sich diese Bibliothek außerdem sehr gut in dieses Framework integrieren. Leider kann es bei der Arbeit mit Vuex immer noch zu einer Schwierigkeit kommen, nämlich darin, die Struktur der Projekte, in denen Sie diese Bibliothek verwenden möchten, ordnungsgemäß vorzubereiten.



In diesem Artikel finden Sie eine Beschreibung der Methodik zum Strukturieren großer Projekte mit Vuex sowie ein Skript zur Automatisierung des Erstellungsprozesses von Vuex-Modulen.

Vue-Enterprise-Boilerplate-Muster und Projektstrukturproblem

Einer der Vue-Entwickler, Chris Fritz, hat eine hervorragende Vorlage für Vue erstellt, die vorgestellte Projektstruktur, in der Vuex verwendet wird. Diese Vorlage ermöglicht es Vuex insbesondere, Module basierend auf den Dateien im Modulordner automatisch zu registrieren. Die Ordnerstruktur des Projekts sieht möglicherweise wie in der folgenden Abbildung aus.


Projektstruktur und unbequeme Code-Platzierung

Wenn Sie diese Vorlage verwenden, müssen sich Status, Getter, Aktionen und Mutationen in derselben Datei befinden. Persönlich ziehe ich es vor, sie in separaten Dateien zu speichern. Angesichts der Tatsache, dass Vuex-Module manchmal recht groß sind, ist es praktisch, durch Programme zu navigieren, ohne durch große Codeteile scrollen zu müssen. Nach dieser Idee ändern wir den Code aus der Vorlage, sodass das, was sich auf einzelne Module bezieht, in Ordner sortiert werden kann, die für diese Module bestimmt sind. Das heißt, die Struktur des Projekts wird sich ändern und der unten gezeigten ähnlich sein.


Die Struktur des Projekts mit der Aufteilung der Materialien von Modulen in separate Dateien, die sich in den Ordnern von Modulen befinden

Entwicklung einer Vorlage, die eine bequeme Projektstruktur unterstützt

Daher werden wir die Arbeit mit Vuex so organisieren, dass wir Ordner- und Dateistrukturen verwenden können, die den in der vorherigen Abbildung gezeigten in unseren Projekten ähneln. Erstellen Sie dazu zunächst ein neues Projekt mit Vue CLI 3 .

Nachdem Sie eine Projektvorlage für die weitere Arbeit bereit haben, installieren Sie Vuex und Lodash, indem npm install vuex lodash -save Befehl npm install vuex lodash -save im Terminal npm install vuex lodash -save . Um mit Modulen arbeiten zu können, benötigen wir die Funktion camelCase von Lodash, mit der Zeichenfolgen in den camelCase konvertiert werden können.

Erstellen Sie nun einen Ordner und eine Dateistruktur ähnlich der in der vorherigen Abbildung gezeigten.

Beginnen wir mit der Datei store.js . Hier ist sein 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 und Vuex werden hier importiert, da wir nicht ohne sie auskommen können. Außerdem importieren wir Module aus /modules/index.js . Als nächstes initialisieren wir den Speicher und durchlaufen alle Module. Wenn das Modul eine init Aktion hat, initialisieren wir das Modul. Dies erweist sich als sehr nützlich für Module, die beim Start der Anwendung initialisiert werden müssen. Aus diesem Grund exportieren wir den store natürlich. main.js wird er normalerweise in die Datei main.js importiert und der Vue-Instanz hinzugefügt.

Jetzt ist es Zeit, mit der Datei index.js zu arbeiten, die sich im Ordner /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; 

In diesem Code importieren wir zuerst die camelCase Funktion aus Lodash. Dann verwenden wir die require.context Methode, um die Module zu verbinden. Als dritten Parameter übergeben wir dort einen regulären Ausdruck, der die Datei index.js , sowie Dateien, deren Namen die index.js , mutations und getters . Sie werden beispielsweise in auth.js in die auth.js importiert und anschließend exportiert. So könnte beispielsweise die Datei auth.js aus dem Ordner src/store/modules/auth/ zu Beginn der Arbeit aussehen:

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

Jetzt müssen nur noch alle Module durchlaufen und mit allen ein einziges Objekt gebildet werden. Hier müssen Sie alle Dateien ausschließen, in deren Namen sich eine unit , da sie nur für Tests und nicht für die Entwicklung oder die Bereitstellung eines Projekts in der Produktion benötigt werden. Danach fügen wir dem Modulobjekt eine neue Eigenschaft hinzu, die den Namen der Statusdatei enthält, z. B. auth oder users . Darüber hinaus verwenden wir die Funktion camelCase , um Eigenschaftsnamen konsistent aussehen zu lassen. Anschließend requireModule wir das requireModule , durchlaufen das requireModule und verwenden das ...requireModule(fileName).default Anschließend exportieren ...requireModule(fileName).default die modules .

Tatsächlich kann so ein Projekt strukturiert werden, in dem Zustand, Getter, Aktionen und Mutationen separat gespeichert und bequem organisiert werden. Lassen Sie uns nun darüber sprechen, wie Sie ein Skript schreiben, um automatisch Vuex-Module zu erstellen.

Skript zum automatischen Erstellen von Vuex-Modulen

Erstellen Sie einen neuen Ordner im Projektordner mit den scripts und erstellen Sie darin die Datei generateVuexModule.js . Für dieses Projekt benötigen wir Node.js. Wenn Sie diese Plattform nicht installiert haben, ist es jetzt an der Zeit, sie zu beheben . Unser Skript hat nur eine Abhängigkeit - das chalk , mit dem in der Konsole angezeigte Materialien entworfen werden. Sie können dieses Paket mit dem npm install -save-dev chalk .

▍Schritt 1

In der Datei generateVuexModule.js müssen Sie drei Module verbinden: fs , path und chalk . Auch hier benötigen Sie eine Konstante mit dem Pfad zum Modulordner ( src/store/modules ) und eine weitere Konstante - args , mit der die Argumente beim Ausführen an das Skript übergeben werden.

 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; } 

Wie Sie sehen können, schreiben wir alle Argumente in die Argumente mit Ausnahme der ersten beiden, da sie den Pfad zu node.exe und der Skriptdatei darstellen und wir diese Informationen nicht benötigen. Uns interessiert nur der dritte Parameter - der Name des neuen Moduls. Darüber hinaus gibt es einige Funktionen, error und success , die das oben genannte chalk , um Nachrichten mit Texten in verschiedenen Farben anzuzeigen.

Hier müssen Sie die Länge des args Arrays überprüfen, um herauszufinden, ob der Modulname an unser Skript übergeben wird. Wenn dies nicht der args ist, geben Sie eine Fehlermeldung aus. Wenn Sie versuchen, dieses Skript mit dem Befehl nodeVuexModule.js auszuführen, ohne etwas anderes an ihn zu übergeben, wird im Terminal eine Fehlermeldung angezeigt.

▍Schritt 2

Zu diesem Zeitpunkt haben wir einen Namen für das Modul und den Pfad, der durch die Konstante modulesPath wird. Wir müssen jedoch noch mit diesen Daten arbeiten. Extrahieren Sie nämlich den Namen aus dem args Array und sammeln Sie den vollständigen Pfad zum Modul, ganz zu schweigen von der Bildung seines Inhalts.

 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 { }; `; 

Der Modulname befindet sich im Element des Arrays args mit dem Index 0. In dieser Phase des Programms können wir auf das Vorhandensein dieses Elements zählen, da wir zuvor versucht haben, es aus process.argv zu extrahieren, und dann die Länge des Arrays args überprüft haben. Darüber hinaus haben wir den vollständigen Pfad mithilfe des Pfadmoduls und der join Methode vorbereitet. Wir haben das aktuelle Verzeichnis mit dem Konstrukt __dirname um eine Ebene nach oben verschoben, da sich die Datei generateVuexModule.js im Projektordner scripts . Dann fügen wir dem Ergebnis einfach den Inhalt der Konstanten modulesPath und den Namen des Moduls hinzu. Zu diesem Zeitpunkt sollte die modulePath Konstante so etwas wie pathToYourProject/project/src/store/modules/moduleName . Hier wird das Modul erstellt. Da wir nun den vollständigen Pfad haben, können wir überprüfen, ob dieses Verzeichnis vorhanden ist. Wir möchten nicht versehentlich die Dateien eines vorhandenen Moduls überschreiben. Wenn das Verzeichnis vorhanden ist, in dem Sie ein neues Modul erstellen möchten, wird dank chalk eine Fehlermeldung in roten Buchstaben angezeigt.


Beispiel für eine Fehlermeldung

Als Nächstes müssen Sie Konstanten erstellen, in denen Daten für die Dateien vorhanden sind. Wie Sie sich vorstellen können, wird stateContent für die stateContent verwendet, stateContent beispielsweise für auth.js , und exportFileContent wird für die getters.js auth.js , exportFileContent und mutations.js verwendet. Bei Bedarf können Sie dieser Liste alles hinzufügen, was in Ihrem Projekt erforderlich ist.

▍Schritt 3

Jetzt müssen wir nur noch Pfade für die Moduldateien erstellen und diese erstellen.

 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!'); 

Zuerst deklarieren wir vier Konstanten, von denen jede einen Pfad für die entsprechende Datei enthält. Als nächstes müssen wir einen Ordner für das Modul erstellen. Wir haben bereits geprüft, ob ein solcher Ordner vorhanden ist, und in diesem Fall einen Fehler ausgegeben. Daher sollte es keine Probleme beim Erstellen eines Ordners geben. Und schließlich verwenden wir die fs.appendFileSync und platzieren die neuen Dateien mit dem Inhalt, der beim Erstellen angegeben wurde, im neu erstellten Verzeichnis. Am Ende zeigt das Skript eine Meldung über den erfolgreichen Abschluss des Vorgangs an.

Um dieses Skript zu verwenden, node generateVuexModule.js yourModuleName einfach den scripts Ihres Projekts im Terminal auf und führen Sie einen Befehl des Formularknotens node generateVuexModule.js yourModuleName . Nach erfolgreichem Abschluss des Skripts wird eine Meldung zum Erstellen eines Moduls angezeigt.

Zusammenfassung

Nachdem Sie dieses Material gelesen haben, haben Sie eine Vorlage zum Strukturieren großer Projekte kennengelernt, in denen Sie Vuex verwenden möchten, sowie ein Skript, das die Erstellung von Vuex-Modulen vereinfacht. Wir hoffen, dass Sie dieses Wissen nützlich finden. Den Projektcode, dessen Beispiele wir untersucht haben, finden Sie hier .

Liebe Leser! Wie strukturieren Sie große Vue-Anwendungen, die Vuex verwenden?