VueJS 3: الحالة العالمية مع واجهة برمجة تطبيقات التكوين

يتيح لك Composition API الجديد التخلص من متجر Vuex. لنلق نظرة على مثال بسيط لكيفية تحقيق ذلك. واعتبر الإيجابيات والسلبيات.

مثال

لنأخذ مثالاً على عداد Vuex من أبسط وثائق المتجر ونطبقه باستخدام تكوين API.



وحدات وحدة العداد / counter.ts:

import { ref } from 'vue'

const counter = ref(0)

export default function useCounter () {
  const increment = () => {
    counter.value++
  }
  return { counter, increment }
}

لاحظ أن متغير العداد خارج الدالة useCounter (). وهكذا ، عندما يتم استدعاء وظيفة useCounter في مكونات مختلفة ، سيشير العداد إلى نفس المثيل. وهذا ما نحتاجه.



استخدام العداد الخاص بنا في مكونات مختلفة بسيط:

<template>
    <div>
      {{ counter }}
    </div>
   <button @click="increment">+</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useCounter from '@/modules/useCounter'

export default defineComponent({
  name: 'App',
  setup () {
    const { counter, increment } = useCounter()
    return { counter, increment }
  }
})
</script>

لاستخدام العداد العام ، تحتاج فقط إلى استيراد useCounter إلى الوحدات المطلوبة واستخدامها.



إذا كنت بحاجة إلى تقييد الوصول إلى متغير العداد ، فلا يمكنك تصديره ، ولكن وظيفة getter:

import { ref, computed } from 'vue'

const counter = ref(0)
const getCounter = computed(() => counter.value)
const increment = () => counter.value++

export default function useCounter () {
  return { getCounter, increment }
}

إيجابيات وسلبيات

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



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



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



يتصل Vuex كمكوِّن إضافي ويتوفر في كل مكون عبر هذا $ Store. في حالة تكوين API ، نحتاج إلى استيراد الوحدة. لا يوجد فرق كبير ، وكلا الأسلوبين يسمحان لك بالعمل مع الدولة العالمية.



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

خاتمة

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