---
title: "بنية Flux بسيطة باستخدام Vue.js"
description: "في التطبيقات الصغيرة التي لا تحتاج إلا إلى نمط بسيط لإدارة الحالة، أستخدم دائمًا مكوّنًا واحدًا يحتفظ بحالة التطبيق، وهو الـ container. ويعمل هذا المكوّن كمصدر وحيد للحقيقة يرجع إليه التطبيق…"
canonical: https://oozou.com/til/simple-flux-architecture-with-vue-js-50
locale: ar
date: 2020-10-13
topic: javascript
---

# بنية Flux بسيطة باستخدام Vue.js

> في التطبيقات الصغيرة التي لا تحتاج إلا إلى نمط بسيط لإدارة الحالة، أستخدم دائمًا مكوّنًا واحدًا يحتفظ بحالة التطبيق، وهو الـ container. ويعمل هذا المكوّن كمصدر وحيد للحقيقة يرجع إليه التطبيق…

Published: 2020-10-13 · Topic: [javascript](https://oozou.com/ar/til-topics/javascript) ([markdown](https://oozou.com/ar/til-topics/javascript.md))

في التطبيقات الصغيرة التي لا تحتاج إلا إلى نمط بسيط لإدارة الحالة، أستخدم دائمًا مكوّنًا واحدًا يحتفظ بحالة التطبيق، وهو الـ container. ويكون هذا المكوّن المصدر الوحيد الموثوق للحالة (single source of truth)، يرجع إليه التطبيق لمعرفة حالاته. توفّر Vue آلية لإنشاء مستمع أحداث عام على مستوى الجذر يُسمّى *EventBus*، وهي طريقة بسيطة جدًا لمحاكاة بنية flux.

كل ما تحتاجون إليه هو وحدة واحدة تصدّر Vue باسم *EventBus* على النحو التالي

```javascript
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
```

بعد ذلك يمكنكم استخدامها داخل الـ container للاستماع (*listen*) إلى الأحداث القادمة من أي مكوّن داخل التطبيق. عادةً أضيف المستمع في مرحلة *created* من دورة الحياة.

```javascript
EventBus.$on('event-name', callback)
```

ثم يمكنكم استيراد *EventBus* في أي مكوّن من مكوّناتكم وإطلاق الحدث *my-custom-event* من أي مكان، دون الحاجة إلى إرسال الحدث (*emit*) إلى المكوّن الأب وتكرار العملية كلها في كل مكوّن يقع بين المكوّن الذي يطلق التغيير والـ container المستهدف.

```javascript
// Goes directly to the global listener and triggers callback
EventBus.$emit('event-name')
```

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

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/ar/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"