ميزات Vuex التي يجب أن تعرفها إذا كنت تهتم حقًا بمتجرك

هذا هو السبب في أن المتجر أصبحت مفيدة للغاية. الأمر متروك لك فيما إذا كنت تستخدم React + Redux أو Vue + Vuex - الهدف الرئيسي واحد، وهو الحفاظ على بياناتك منظمة، ويمكن الوصول إليها وآمنة في نفس الوقت.

في هذه المقالة، سأعرض لك بعض الأمثلة على كيفية الحفاظ على نظافة وفعالية مخزن Vuex الخاص بك.

قبل أن نبدأ، لنفترض أن:

• لديك بعض الخبرة في مجال الحديث JavaScript,
• أنت تعرف أساسًا ما هو Vue وكيفية استخدامه الدعائم, محسوبة, إلخ,
• كنت على دراية ب Vuex (الإجراءات, الطفرات, إلخ) وتريد أن تجعل تطبيقاتك أفضل.

Vuexمثل غالبية العناصر الأساسية مشاريع 1TP5555Tموثقة بشكل جيد ويمكنك العثور على العديد من الاختراقات المفيدة في المستندات الرسمية. لقد استخلصنا لك بعض المعلومات الأساسية منها.

يبدو تنفيذ مخزن Vuex الأساسي على النحو التالي:

// main.js

استيراد Vue من 'vue'
استيراد Vuex من 'vuex'
استيراد التطبيق من "./App";

Vue.use(Vuex)

متجر الدستور = متجر Vuex.Store الجديد ((
  الحالة: (
    البيانات: فارغة;
  ),
  الإجراءات: (
      بعض الإجراءات: (( الالتزام )، البيانات)) (
          ارتكاب(" SOME_MUTATION "، البيانات);
      )
  ),
  الطفرات: (
    SOME_MUTATION (حالة، بيانات) (
        state.data = data;
    )
  ))
));

جديد Vue((
  el: "#app",
  التصيير: h => h(App),
  متجر
));

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

// store.js
استيراد Vue من 'vue'
استيراد Vuex من 'vuex'

Vue.use(Vuex);

الحالة = (
    البيانات: فارغة;
);

تشكل الإجراءات = (
    بعض الإجراءات: (( التزام )، بيانات )) (
        ارتكاب(("SOME_MUTATION"، البيانات);
    )
);

تشكل الطفرات = (
    SOME_MUTATION (حالة، بيانات) (
        state.data = data;
    )
);

تصدير افتراضي جديد Vuex.Store((
    state,
    الإجراءات
    الطفرات
));

1. الوحدات النمطية

ماذا يجب أن تفعل عندما متجر.js يصبح الملف ضخمًا ويصعب العمل عليه؟ في الواقع، هناك ميزة Vuex الرائعة حقًا - الوحدات. وهي مخصصة لتقسيم بياناتك إلى ملفات منفصلة.

تخيل أنك تعمل على بعض تطبيقات الشركات، حيث لديك بعض مجالات البيانات، على سبيل المثال:

• المستخدم (إدارة جميع الصلاحيات والأذونات),
• معلمات المسار (إدارة المعلمات العامة قبل الطلبات إلى واجهة برمجة التطبيقات),
• المبيعات (بالنسبة لمكون SalesMegaChart المرئي في سياق شهري/ربع سنوي/سنوي),
• الطلبات (تظهر بعد النقر على شريط SalesMegaChart).

...وربما أكثر من ذلك. الآن لديك أسباب جدية لإدخال بعض الوحدات النمطية في متجرك.

أولاً وقبل كل شيء، قم بتحريك متجر.js إلى ملف تم إنشاؤه حديثًا المتجر/ الدليل وأعد تسميته index.js. اختياريًا، إذا كنت تريد الاحتفاظ بكل شيء معبأ في وحدات، فقم بإزالة الولاية, الإجراءات و الطفرات من الملف الرئيسي.

// المتجر/index.js

استيراد Vue من 'vue'
استيراد Vuex من 'vuex'

Vue.use(Vuex);

تصدير افتراضي جديد Vuex.Store((
    الوحدات النمطية: (
        // ستوضع الوحدات هنا
    )
));

ثم، بجانب ملف 'store/index.js'، قم بإنشاء الوحدة النمطية الأولى - 'store/user.js'.

استيراد ApiService من ".../services/api.service";

الحالة الثابتة = (
    تسجيل الدخول: خطأ,
    خطأ تسجيل الدخول: فارغ,
    المستخدم: فارغ
);

تشكل الإجراءات = (
    تسجيل الدخول: غير متزامن (( التزام )، بيانات )) (
        محاولة (
            const response = await ApiService.post('/ تسجيل الدخول، البيانات);
            const ( المستخدم ) = response.data.data;

            التزام("حفظ_المستخدم"، المستخدم);
            التزام("تسجيل الدخول_نجاح");
        ) التقاط (خطأ) (
            ارتكاب("LOGIN_ERROR"، خطأ);
        )
    )
);

تشكل الطفرات = (
    SAVE_USER (الحالة، المستخدم) (
        state.user = user;
    ),

    LOGIN_SUCCCESS (الحالة) (
        state.logIn = صحيح;
    ),

    تسجيل الدخول_خطأ (الحالة، خطأ) (
        state.loginError = خطأ;
        state.logIn = خطأ;
    )
);

تصدير const user (
    الحالة,
    الإجراءات,
    الطفرات
)

والآن، قم بتحميل الوحدة الجاهزة في الملف الرئيسي 'store/index.js':

استيراد Vue من 'vue'
استيراد Vuex من 'vuex'
استيراد (مستخدم) من '/مستخدم';

Vue.use(Vuex);

تصدير افتراضي جديد Vuex.Store((
    الوحدات: (
        مستخدم
    )
));

تهانينا! لديك الآن تطبيق متجر جميل المظهر حقًا. يمكنك أيضًا الوصول إلى البيانات من المكوّن (على سبيل المثال, UserProfile.vue.vue) مثل هذا:

<template>
    <div class="user-profile">
        <h2>(( user.name ))!</h2>
        <!-- component template goes here -->
    </div>
</template>

<script> import ( mapActions ) from 'Vuex';

    export default (
        name: 'UserProfile',

        computed: mapState((
            user: state => state.user
            // user: 'user' <-- alternative syntax
        ))
    )
</script>

2. مساحات التسمية

الآن بعد أن تعرفت على كيفية استخدام الوحدات، يجب أن تتعرف أيضًا على Vuex المسافات بين الأسماء. في الخطوة السابقة، قمنا بإنشاء المتجر/المستخدم.js مع ملف المستخدم الوحدة النمطية.

بنية البيانات المحددة في user.js يمكن الوصول إلى الملف من المكونات، ولكن يمكنك اكتشاف أن جميع المستخدم تنتقل البيانات مباشرةً إلى الولاية السياق، كما هو الحال هنا:

محسوبة: mapState((
    المستخدم: الحالة => state.user.state.user
    // مستخدم: 'مستخدم' <-- طريقة بديلة
))

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

تصدير الدستور المستخدم (
    متباعدة بالأسماء: صحيح، // <-- تباعد الأسماء!
    الحالة,
    الإجراءات,
    الطفرات
)

من الآن فصاعداً، كل المستخدم البيانات (الولاية متغير من المتجر/المستخدم.js ملف) سيتم التعامل معها ضمن ملف الحالة.المستخدم المرجع:

محسوبة: mapState((
    المستخدم: الحالة => state.user.user.user
    // مستخدم: 'مستخدم/مستخدم' <-- طريقة بديلة
))

بعد بضع خطوات، يمكنك تحقيق شيء كهذا للمكوّن:

استيراد (mapActions) من 'Vuex';

تصدير الافتراضي (
    الاسم: 'Dashboard',

    المحسوبة: mapState((
        المبيعات: 'مبيعات/بيانات',
        الطلبات: 'الطلبات/البيانات',
        sortBy: 'orders/sortBy',
        تسجيل الدخول: 'مستخدم/تسجيل دخول'
    )),

    الأساليب: mapActions((
        تسجيل الخروج: 'مستخدم/تسجيل الخروج',
        تحميل المبيعات: 'مبيعات/تحميل',
        تحميل الطلبات: 'الطلبات/التحميل'
    )),

    تم إنشاؤه() (
        إذا (تم (تسجيل الدخول هذا) (
            loadSales();
            loadOrders();
        )
    )
)

برافو! جديد جدًا ونظيف جدًا... لكن لا تقلق، إعادة الهيكلة لا تنتهي أبدًا. هل أنت مستعد للخطوات التالية؟

3. التواصل بين الوحدات

في الخطوة الأولى، لقد أظهرت بعض الحركة في المستخدم الوحدة النمطية:

تشكل الإجراءات = (
    تسجيل الدخول: غير متزامن (( التزام )، بيانات)) (
        محاولة (
            const response = await ApiService.post('/ تسجيل الدخول، البيانات);
            const ( المستخدم ) = response.data.data;

            التزام("حفظ_المستخدم"، المستخدم);
            التزام("تسجيل الدخول_نجاح");
        ) التقاط (خطأ) (
            ارتكاب("LOGIN_ERROR"، خطأ);
        )
    )
);

في حالة الفشل، سنقوم بإضافة خطأ في تسجيل الدخول إلى متجرنا - ما هي الخطوة التالية؟

لدينا هنا بعض الخيارات ويعتمد الاختيار على الخيار الذي يناسب احتياجاتك بشكل أفضل. أبسط طريقة تستخدم ت-إذا التوجيهية، والتي بفضلها يمكن عرض رسالة خطأ إذا كان هناك خطأ في متجرك.

<template>
    <div class="dashboard">
        <!-- dashboard component template -->
        <div
            v-if="error"
            class="error-message"
        > (( error.message )) </div>
    </div>
</template>
<script> import ( mapActions ) from 'Vuex';

export default (
    name: 'Dashboard',

    computed: mapState((
        error: "user/loginError"
    ))
)
</script>

مرة أخرى، تخيل أن لديك العديد من الوحدات النمطية وكل منها محاولة/التقاط بناء الجملة ينشئ خطأ جديدًا في متجرك. من الواضح أنك ستسيء استخدام قاعدة DRY بهذه الطريقة.

كيف يمكنك جعل عمليات معالجة الأخطاء أكثر عمومية؟

دعونا نعرّف شائع الوحدة النمطية ووضع بعض المنطق فيها والذي سيُستخدم عالميًا.

// store/common.js

الحالة الثابتة = (
    أخطاء: []
);

تشكل الإجراءات = (
    خطأ: (
        الجذر: صحيح,
        معالج (( التزام )، خطأ )) (
            التزام("ERROR"، خطأ);
        )
    )
),

تشكل الطفرات = (
    خطأ (حالة، خطأ) (
        /* بهذه الطريقة سنحصل على أحدث خطأ في أعلى القائمة *//
        state.mistakes = [خطأ، ...state.errors];
    ))
);

تصدير كونت شائع (
    متباعدة الأسماء: صحيح,
    الحالة,
    الطفرات
)

والآن، يمكننا تكييف المستخدم (والوحدات النمطية الأخرى أيضًا):

جرب (
    // بعض الإجراءات
)إلتقاط (خطأ) (
    ارتكاب ("مشترك/خطأ"، خطأ، ( الجذر: صحيح )));
)

أو بطريقة أكثر أناقة، باستخدام الإجراء العام:

جرب (
    // بعض الإجراءات
) التقاط (خطأ) (
    إرسال("خطأ"، خطأ);
)

هذا التركيب من الالتزام و الإرسال تبدو المكالمات واضحة بذاتها، ولكن يمكنك قراءة المزيد عن هذه الحيل هنا.

عندما يكون لديك جميع الأخطاء في مكان واحد، يمكنك بسهولة تحميلها إلى لوحة التحكم المكوّن:

محسوبة: MapState((
    أخطاء 'شائع/خطأ'
)),

مشاهدة: (
    /* سيتم استدعاء هذا بعد كل طفرة "شائع/خطأ"، حيث نضيف الأخطاء الجديدة فقط إلى المخزن، واحدًا تلو الآخر *//
    أخطاء() (
        ) هذا.showErrorMessage(this.mistakes[0]);
    )
)

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

كما ترى، نحن نشهد تغييرات على مشترك/الأخطاء الشائعة في المخزن. في مثل هذه الحالات، عندما تحتاج إلى تحديد إجراء ما على طفرة معينة، يمكنك استخدام إضافات Vuex أو حتى المكونات ذات الرتب العليا (HOC).

سوف أناقش الإضافات والمكونات الإضافية في المقالة التالية. في هذه الأثناء، أشكركم على قراءة هذا المقال، وآمل أن تكونوا قد استمتعتم بالأمثلة التي أعددناها.

ترقبوا معنا وواصلوا البرمجة!

اقرأ المزيد:

– كيفية تحسين تطبيقات Vue.js؟ بعض النصائح العملية

– GraphQL: الدروس المستفادة في الإنتاج

– Shopify أو سبري أو سوليدوس؟ تحقق لماذا يمكن أن يساعدك Ruby on Rails في تطوير تجارتك الإلكترونية