Vuex ، مدير ولاية Vue.js

Vuex هي مكتبة إدارة الدولة الرسمية لـ Vue.js. في هذا البرنامج التعليمي سأشرح استخدامه الأساسي.

مقدمة إلى Vuex

Vuex هي مكتبة إدارة الدولة الرسمية لـ Vue.js.

وتتمثل مهمتها في مشاركة البيانات عبر مكونات التطبيق الخاص بك.

يمكن للمكونات الموجودة في Vue.js من خارج منطقة الجزاء التواصل باستخدام

  • الدعائم، لتمرير الحالة إلى المكونات الفرعية من أحد الوالدين
  • الأحداث، لتغيير حالة المكون الرئيسي من عنصر فرعي ، أو استخدام المكون الجذر كناقل حدث

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

في هذه الحالة ، يكون الخيار الجيد هو جعل الحالة مركزية في متجر واحد. هذا ما يفعله Vuex.

لماذا يجب عليك استخدام Vuex

Vuex ليس خيار إدارة الحالة الوحيد الذي يمكنك استخدامه في Vue (يمكنك استخدام ملفاتإعادةأيضًا) ، لكن ميزته الرئيسية هي أنه رسمي ، وتكامله مع Vue.js هو ما يجعله يتألق.

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

اقترضت Vuex العديد من أفكارها من نظام React البيئي ، لأن هذا هو نمط Flux الذي شاعه Redux.

إذا كنت تعرف Flux أو Redux بالفعل ، فستكون Vuex مألوفة جدًا. إذا لم تفعل ، فلا مشكلة - سأشرح كل مفهوم من الألف إلى الياء.

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

أنت تعلم أنك بحاجة إلى شيء مثل Vuex عندما تبدأ في القيام بالكثير من العمل لتمرير جزء من الحالة.

في هذه الحالة ، توفر Vuex مخزنًا مركزيًا للولاية ، ويمكنك تغيير الحالة من خلال مطالبة المتجر بالقيام بذلك.

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

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

لنبدأ

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

سيتم وضع الأمثلة التي أستخدمها CodeSandbox ، وهي خدمة رائعة تحتوي على عينة Vue CLI جاهزة للذهاب إليهاhttps://codesandbox.io/s/vue. أوصي باستخدامه للتلاعب.

CodeSandbox

بمجرد أن تكون هناك ، انقر فوقأضف التبعيةالزر ، أدخل "vuex" وانقر فوقه.

الآن سيتم إدراج Vuex في تبعيات المشروع.

لتثبيت Vuex محليًا ، يمكنك تشغيل ملفاتnpm install vuexأوyarn add vuexداخل مجلد المشروع.

قم بإنشاء متجر Vuex

نحن الآن جاهزون لإنشاء متجر Vuex الخاص بنا.

يمكن وضع هذا الملف في أي مكان. يُقترح عمومًا وضعه في ملفsrc/store/store.jsملف ، لذلك سنفعل ذلك.

في هذا الملف نقوم بتهيئة Vuex ونطلب من Vue استخدامه:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({})

Vuex store

نقوم بتصدير كائن متجر Vuex ، والذي نقوم بإنشائه باستخدام ملفVuex.Store()API.

حالة استخدام للمخزن

الآن بعد أن أصبح لدينا هيكل عظمي في مكانه ، دعنا نتوصل إلى فكرة لحالة استخدام جيدة لـ Vuex ، حتى أتمكن من تقديم مفاهيمها.

على سبيل المثال ، لدي مكونان شقيقان ، أحدهما به حقل إدخال والآخر يطبع محتوى حقل الإدخال هذا.

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

إدخال المكونات الجديدة التي نحتاجها

قمت بحذف مكون HelloWorld وأضف مكون النموذج ومكون العرض.

<template>
	<div>
		<label for="flavor">Favorite ice cream flavor?</label>
		<input name="flavor">
	</div>
</template>
<template>
	<div>
		<p>You chose ???</p>
	</div>
</template>

إضافة تلك المكونات إلى التطبيق

نضيفهم إلى كود App.vue بدلاً من مكون HelloWorld:

<template>
  <div id="app">
    <Form/>
    <Display/>
  </div>
</template>

<script> import Form from ‘./components/Form’ import Display from ‘./components/Display’

export default { name: ‘App’, components: { Form, Display } } </script>

أضف الدولة إلى المخزن

لذلك مع وجود هذا في مكانه ، نعود إلى ملف store.js ونضيف خاصية إلى المتجر تسمىstate، وهو كائن يحتوي علىflavorمنشأه. هذه سلسلة فارغة في البداية.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ } })

سنقوم بتحديثه عندما يكتب المستخدم في حقل الإدخال.

أضف طفرة

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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } } })

أضف أداة جامعية للإشارة إلى خاصية الدولة

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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } }, getters: { flavor: state => state.flavor } })

لاحظ كيفgettersهو كائن.flavorهي خاصية لهذا الكائن ، الذي يقبل الحالة كمعامل ، ويعيدflavorممتلكات الدولة.

إضافة متجر Vuex إلى التطبيق

الآن المتجر جاهز للاستخدام. نعود إلى رمز التطبيق الخاص بنا ، وفي ملف main.js ، نحتاج إلى استيراد الحالة وإتاحتها في تطبيق Vue الخاص بنا.

نضيف

import { store } from './store/store'

ونضيفه إلى تطبيق Vue:

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

بمجرد أن نضيف هذا ، نظرًا لأن هذا هو مكون Vue الرئيسي ، فإن ملفstoreمتغير داخل كل مكون Vue سيشير إلى متجر Vuex.

قم بتحديث الحالة على إجراء المستخدم باستخدام الالتزام

لنقم بتحديث الحالة عندما يكتب المستخدم شيئًا ما.

نقوم بذلك باستخدام ملفstore.commit()API.

لكن أولاً ، لنقم بإنشاء طريقة يتم استدعاؤها عندما يتغير محتوى الإدخال. نحن نستخدم@inputبدلا من@changeلأنه يتم تشغيل الأخير فقط عندما يتم نقل التركيز بعيدًا عن مربع الإدخال ، بينما@inputعند كل ضغطة مفتاح.

<template>
  <div>
    <label for="flavor">Favorite ice cream flavor?</label>
    <input @input="changed" name="flavor">
  </div>
</template>

<script> export default { methods: { changed: function(event) { alert(event.target.value) } } } </script>

الآن بعد أن أصبح لدينا قيمة النكهة ، نستخدم Vuex API:

<script>
export default {
  methods: {
    changed: function(event) {
      this.$store.commit('change', event.target.value)
    }
  }
}
</script>

انظر كيف نشير إلى المتجر باستخدامthis.$store؟ هذا بفضل إدراج كائن store في تهيئة مكون Vue الرئيسي.

الcommit()الطريقة تقبل اسم الطفرة (استخدمناchangeفي متجر Vuex) والحمولة ، والتي سيتم تمريرها إلى الطفرة كمعامل ثاني لوظيفة رد الاتصال الخاصة بها.

استخدم أداة الإدخال لطباعة قيمة الحالة

نحتاج الآن إلى الإشارة إلى مصدر هذه القيمة في نموذج العرض ، باستخدام$store.getters.flavor.thisيمكن إزالتها لأننا في النموذج وthisضمني.

<template>
  <div>
    <p>You chose {{ $store.getters.flavor }}</p>
  </div>
</template>

تغليف

هذا كل شيء للحصول على مقدمة إلى Vuex!

الكود المصدري الكامل والفعال متاح علىhttps://codesandbox.io/s/zq7k7nkzkm

لا يزال هناك العديد من المفاهيم المفقودة في هذا اللغز:

  • أجراءات
  • الوحدات
  • مساعدين
  • الإضافات

ولكن لديك الأساسيات للذهاب والقراءة عنها في المستندات الرسمية.

ترميز سعيد!

تحميل مجانيكتيب Vue


المزيد من دروس vue: