Vuex: هيكلة المشاريع الكبيرة والعمل مع الوحدات

Vuex هي مكتبة إدارة حالة تطبيق رسمية وموثقة جيدًا ومصممة خصيصًا لـ Vue.js. يعتقد مؤلف المادة ، التي ننشر ترجمتها اليوم ، أن استخدام هذه المكتبة هو أكثر متعة من Redux ، لأنه ، أولاً ، تتطلب Vuex كود أقل من اللوح الأساسي ، وثانيًا ، بسبب حقيقة أنها تعمل مع آليات غير متزامنة ، لا حاجة إلى مكتبات إضافية هنا. علاوة على ذلك ، نظرًا لأن مكتبة Vuex تم إنشاؤها بواسطة نفس الفريق الذي يعمل على Vue ، فإن هذه المكتبة تتكامل بشكل جيد جدًا مع هذا الإطار. لسوء الحظ ، في العمل مع Vuex ، لا يزال بإمكانك مواجهة صعوبة واحدة ، تتمثل في التحضير الصحيح لهيكل المشاريع التي تخطط لاستخدام هذه المكتبة فيها.



ستجد في هذه المقالة وصفًا لمنهجية هيكلة المشاريع الكبيرة باستخدام Vuex ، ونصًا برمجيًا مصممًا لأتمتة عملية إنشاء وحدات Vuex.

نمط Vue-enterprise-boilerplate ومسألة هيكل المشروع

أنشأ أحد مطوري Vue ، كريس فريتز ، نموذجًا ممتازًا لـ Vue ، وهي بنية المشروع المقدمة والتي تم تصميمها لاستخدام Vuex. على وجه الخصوص ، يسمح هذا القالب لـ Vuex بتسجيل الوحدات تلقائيًا استنادًا إلى الملفات الموجودة في مجلد modules . قد تبدو بنية المجلد الخاصة بالمشروع على النحو التالي.


هيكل المشروع ووضع رمز غير مريح

عند استخدام هذا القالب ، من الضروري أن تكون الحالة والرسومات والإجراءات والطفرات في نفس الملف. أنا شخصياً أفضل الاحتفاظ بها في ملفات منفصلة ، مما يسمح ، بالنظر إلى حقيقة أن وحدات Vuex تكون كبيرة جدًا في بعض الأحيان ، فمن السهل التنقل في البرامج ، دون الحاجة إلى التمرير عبر أجزاء ضخمة من التعليمات البرمجية. باتباع هذه الفكرة ، سنقوم بتغيير الكود من القالب بحيث يمكن فرز ما يتعلق بالوحدات الفردية في مجلدات مخصصة لهذه الوحدات. أي أن هيكل المشروع سيتغير وسيكون مشابهًا للهيكل الموضح أدناه.


هيكل المشروع مع تفصيل مواد الوحدات إلى ملفات منفصلة موجودة في مجلدات الوحدات

تطوير قالب يدعم هيكل مشروع مناسب

لذا ، سننظم العمل مع Vuex حتى نتمكن من استخدام هياكل المجلدات والملفات المشابهة لتلك الموضحة في الشكل السابق في مشاريعنا. للقيام بذلك ، قم أولاً بإنشاء مشروع جديد باستخدام Vue CLI 3 .

بعد أن يكون لديك قالب مشروع جاهز لمزيد من العمل معه ، قم بتثبيت Vuex و Lodash عن طريق تشغيل الأمر npm install vuex lodash -save في الوحدة الطرفية. للعمل مع الوحدات النمطية ، نحتاج إلى وظيفة camelCase من Lodash ، والتي تم تصميمها لتحويل السلاسل إلى نمط الجمل.

الآن قم بإنشاء مجلد وهيكل ملف مشابه لتلك الموجودة في الشكل السابق.

لنبدأ بملف store.js . هنا هو رمزه:

 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 و Vuex هنا ، حيث لا يمكننا الاستغناء عنها. بالإضافة إلى ذلك ، نقوم باستيراد الوحدات من /modules/index.js . بعد ذلك ، نقوم بتهيئة التخزين والتكرار عبر جميع الوحدات. إذا كانت الوحدة تحتوي على إجراء التهيئة ، فإننا نقوم بتهيئة الوحدة. يتبين أن هذا مفيد جدًا لتلك الوحدات التي تحتاج إلى التهيئة عند بدء التطبيق. نتيجة لذلك ، بالطبع ، نقوم بتصدير store ، وبعد ذلك ، عادةً ما يتم استيراده إلى ملف main.js وإضافته إلى مثيل Vue.

حان الوقت الآن للعمل مع ملف index.js ، الموجود في المجلد /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; 

في هذا الكود ، نقوم أولاً باستيراد دالة camelCase من Lodash. ثم نستخدم طريقة require.context لتوصيل الوحدات. كمعلمة ثالثة ، نقوم بتمرير تعبير عادي يقوم بتصفية ملف index.js ، بالإضافة إلى الملفات التي تحتوي أسماؤها على actions الخطوط mutations getters . سيتم استيرادها إلى ملف الحالة ، على سبيل المثال ، في auth.js ، ثم تصديرها. على سبيل المثال ، إليك كيفية auth.js ملف auth.js من المجلد src/store/modules/auth/ في بداية العمل:

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

الآن يبقى فقط أن تذهب من خلال جميع الوحدات وتشكيل كائن واحد معهم جميعا. هنا تحتاج إلى استبعاد جميع الملفات التي توجد باسمها unit خط ، حيث إنها مطلوبة فقط للاختبارات ، وليس للتطوير أو لنشر مشروع في الإنتاج. بعد ذلك ، نضيف خاصية جديدة إلى كائن modules ، والتي سيكون لها اسم ملف الحالة ، على سبيل المثال ، auth أو users . بالإضافة إلى ذلك ، نستخدم وظيفة camelCase لجعل أسماء الخصائص تبدو متناسقة. ثم ...requireModule(fileName).default كائن modules ، ونقوم requireModule خلال ...requireModule(fileName).default وباستخدام ...requireModule(fileName).default ، ثم ...requireModule(fileName).default بتصدير modules .

في الواقع ، هذه هي الطريقة التي يمكن بها هيكلة المشروع الذي يتم فيه تخزين الحالة والرسائل والإجراءات والطفرات بشكل منفصل وتنظيمها بشكل ملائم. الآن دعونا نتحدث عن كيفية كتابة برنامج نصي لإنشاء وحدات Vuex تلقائيًا.

برنامج نصي لإنشاء وحدات Vuex تلقائيًا

قم بإنشاء مجلد جديد في مجلد المشروع باستخدام scripts اسم ، حيث قم بإنشاء الملف generateVuexModule.js . لهذا المشروع ، سنحتاج إلى Node.js ، لذلك ، إذا لم يكن لديك هذا النظام الأساسي مثبتًا ، فقد حان الوقت لإصلاحه . يحتوي نصنا على تبعية واحدة فقط - حزمة chalk ، والتي تستخدم لتصميم المواد المعروضة في وحدة التحكم. يمكنك تثبيت هذه الحزمة باستخدام الأمر npm install -save-dev chalk .

الخطوة 1

في ملف generateVuexModule.js ، تحتاج إلى توصيل ثلاث وحدات: fs ، path chalk . أيضًا هنا تحتاج إلى ثابت مع المسار إلى مجلد الوحدات ( src/store/modules ) وثابت آخر - args ، والذي سيحصل على الوسيطات التي تم تمريرها إلى البرنامج النصي عند تشغيله.

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

كما ترون ، نكتب جميع الحجج إلى args باستثناء الأولين ، لأنها تمثل المسار إلى node.exe وملف البرنامج النصي ، ولا نحتاج إلى هذه المعلومات. نحن مهتمون فقط بالمعلمة الثالثة - اسم الوحدة الجديدة. بالإضافة إلى ذلك ، هناك بعض الوظائف error success ، والتي تستخدم حزمة chalk المذكورة أعلاه لعرض الرسائل بنصوص بألوان مختلفة.

هنا تحتاج إلى التحقق من طول مصفوفة args لمعرفة ما إذا كان اسم الوحدة النمطية يتم تمريره إلى البرنامج النصي الخاص بنا ، وإذا لم يكن كذلك ، فقم بإعطاء رسالة خطأ. لذلك ، إذا حاولت تشغيل هذا النص البرمجي باستخدام أمر node generateVuexModule.js ، دون تمرير أي شيء آخر إليه ، فستظهر لك رسالة خطأ في النهاية الطرفية.

الخطوة 2

عند هذه النقطة ، لدينا اسم للوحدة والمسار الذي modulesPath ثابت modulesPath . ومع ذلك ، لا يزال يتعين علينا العمل مع هذه البيانات. أي استخرج الاسم من مصفوفة args المسار الكامل للوحدة ، ناهيك عن تكوين محتوياته.

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

سيكون اسم الوحدة في عنصر مصفوفة args مع فهرس 0. في هذه المرحلة من البرنامج ، يمكننا الاعتماد على وجود هذا العنصر ، حيث قمنا سابقًا بمحاولة استخراجه من process.argv ، ثم تحققنا من طول مصفوفة args . بالإضافة إلى ذلك ، قمنا بإعداد المسار الكامل باستخدام وحدة path وطريقة join . حصلنا على الدليل الحالي باستخدام اسم __dirname ، تم نقله بمقدار مستوى واحد ، حيث يوجد ملف __dirname في مجلد مشروع scripts . ثم نضيف إلى النتيجة ومحتويات modulesPath الثابتة modulesPath واسم الوحدة. عند هذه النقطة ، يجب أن يحتوي ثابت modulePath على شيء مثل pathToYourProject/project/src/store/modules/moduleName . هذا هو المكان الذي سيتم فيه إنشاء الوحدة النمطية. الآن ، بما أن لدينا المسار الكامل ، يمكننا التحقق من وجود هذا الدليل. لا نريد استبدال ملفات وحدة نمطية عن طريق الخطأ. ونتيجة لذلك ، إذا كان الدليل الذي تخطط لإنشاء وحدة نمطية فيه موجودًا ، فسنعرض رسالة خطأ بأحرف حمراء ، وذلك بفضل chalk .


مثال على رسالة الخطأ

بعد ذلك ، تحتاج إلى إنشاء ثوابت حيث ستكون هناك بيانات للملفات. كما يمكنك أن تتخيل ، stateContent استخدام stateContent لملف الحالة ، أي على سبيل المثال ، لـ auth.js ، ويتم استخدام getters.js و getters.js و mutations.js . إذا لزم الأمر ، يمكنك إضافة كل ما هو مطلوب في مشروعك إلى هذه القائمة.

الخطوة 3

الآن علينا فقط إنشاء مسارات لملفات الوحدة النمطية وإنشائها.

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

أولاً نعلن عن أربعة ثوابت ، يحتوي كل منها على مسار للملف المقابل. بعد ذلك ، نحتاج إلى إنشاء مجلد للوحدة النمطية. لقد تحققنا بالفعل من وجود مثل هذا المجلد وأصدرنا خطأ إذا كان الأمر كذلك. لذلك ، يجب ألا تكون هناك مشاكل في إنشاء مجلد. وأخيرًا ، نستخدم fs.appendFileSync ، fs.appendFileSync الملفات الجديدة مع المحتويات المحددة في عملية إنشائها في الدليل الذي تم إنشاؤه حديثًا. في النهاية ، يعرض البرنامج النصي رسالة حول إتمام العملية بنجاح.

لاستخدام هذا النص البرمجي ، ما عليك سوى الانتقال إلى مجلد scripts لمشروعك في المحطة الطرفية وتشغيل أمر node generateVuexModule.js yourModuleName النموذج node generateVuexModule.js yourModuleName . بعد الانتهاء بنجاح من البرنامج النصي ، سترى رسالة حول إنشاء وحدة نمطية.

الملخص

بعد مراجعة هذه المادة ، تعرفت على قالب لهيكلة المشاريع الكبيرة حيث تخطط لاستخدام Vuex ، ونصًا برمجيًا يبسط إنشاء وحدات Vuex. نأمل أن تجد هذه المعرفة مفيدة. يمكن العثور على رمز المشروع ، الذي درسناه ، هنا .

أعزائي القراء! كيف تقوم ببناء تطبيقات Vue الكبيرة التي تستخدم Vuex؟