آشنایی با Mixinها

Familiarity with Mixins

0
27
Vue.JS 2: آشنایی با Mixin ها - قسمت 56

حالا که با فیلترها آشنا شدیم نوبت به mixin ها می رسد. برای شروع این جلسه وارد پوشه Src شده و یک کامپوننت جدید به نام list.vue بسازید. محتوای این فایل به شکل زیر است:

همانطور که می بینید این کد دقیقا شبیه به کدهای فایل app.vue است با این تفاوت که قسمت های مربوط به فیلترهای کوچک و بزرگ کردن متون را حذف کرده ام و فقط کدهای مخصوص لیست میوه ها باقی مانده است. در این مرحله وارد فایل App.vue شده و List.vue را وارد آن کنید:

من در اینجا List.vue را import کرده و سپس آن را به عنوان یک کامپوننت محلی ثبت کرده ام. حالا می توانیم از این کامپوننت درون قسمت template استفاده کنم:

حالا اگر مرورگر را باز کنید، هر دو لیست را خواهید دید.

در حال حاضر مشکلی که وجود دارد کدهای تکراری در هر دو کامپوننت هستند. در واقع ما دو کامپوننت را ایجاد کرده ایم و به هر دو نیاز داریم اما data آن ها به صورت جداگانه و تکراری در هر دو فایل تعریف شده است و طبیعتا مدیریت آن ها مشکل خواهد بود. اگر ما یک filter سراسری تعریف کرده بودیم می توانستیم با استفاده از آن، هر دو فایل را فیلتر کنیم اما در حال حاضر چنین امکانی نداریم. چرا؟ به دلیل اینکه توضیح دادیم filter ها کدهای بهینه ای نیستند. البته این موضوع مخصوص به مبحث filter ها نیست و در بسیاری از برنامه های واقعی کدهای تکراری را پیدا خواهید کرد. در این حالت دوست داریم قابلیتی وجود داشته باشد که بتوانیم قسمتی از کدهای یک کامپوننت را در کامپوننت های دیگر به اشتراک بگذاریم تا از تکراری شدن کدها و خطای code duplication دوری کنیم.

اگر بخواهیم data و همچنین computed را در هر دو فایل داشته باشیم اما کدها را تکراری ننویسیم باید از mixin ها استفاده کنیم. برای انجام این کار وارد پوشه src شده و فایل جدیدی به نام fruitMixin.js ایجاد کنید و ثابت خودمان را export می کنیم. این ثابت باید یک شیء جاوا اسکریپتی باشد که تمام داده های مورد نیاز ما را (در این مثال، data و computed را) داشته باشد. محتویات این فایل:

حالا می توانیم به List.vue رفته و این فایل را در آنجا import کنیم:

سپس می توانیم تمام data و computed را با fruitMixin جابجا کنیم. برای این کار کدهای قبلی این کامپوننت را حذف کرده و به جای آن می گوییم:

Mixins یک خصوصیت پیش فرض در فریم ورک Vue است که mixin های شما را مشخص می کند. این خصوصیت یک آرایه است که در آن باید نام تمام mixin های خود را وارد کنید. من اینجا فقط یک mixin داشتم بنابراین فقط همان را وارد کرده ام.

همین کار را می توان با App.vue نیز انجام داد، البته درون App.vue یک خصوصیت دیگر به نام text نیز داریم:

بنابراین نمی توانیم همه آن را حذف کنیم بلکه می گوییم:

یعنی فقط مواردی را که درون mixin خود داریم حذف کرده ایم. سپس به سادگی mixin را وارد این فایل کرده و از خصوصیت mixins برای ثبت آن استفاده می کنیم:

 اگر کدها را ذخیره کرده و به مرورگر بروید، تمام برنامه را بدون نقص مشاهده می کنید. توجه داشته باشید که در این فایل یک data داریم و درون mixin خودمان نیز یک data دیگر داریم بنابراین با وارد کردن آن به این فایل دو data خواهیم داشت که غیر مجاز است اما Vue هوشمندانه عمل می کند و خودش data های ما را تبدیل به یک Data می کند تا به خطا برنخوریم.

در قسمت بعد وارد جزئیات بیشتری از mixin ها می شویم.

ترتیبی که روکسو برای یادگیری مطالب سری آموزش رایگان Vue js از صفر تا صد به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید