کاربرد Composition API جدید در Vue – از صفر تا صد

در این مقاله با بهره‌گیری از API جدید Composition یک پروژه Vue2.x راه‌اندازی کرده و یک اپلیکیشن ToDo می‌سازیم. Composition API یکی از جدیدترین قابلیت‌های نسخه جدید Vue محسوب می‌شود که بحث‌های زیادی را نیز برانگیخته است. در واقع Composition API یک رویکرد کاملاً جدید برای ایجاد قابلیت استفاده مجدد از منطق و سازمان‌دهی کدبیس به حساب می‌آید.

آغاز کار با Composition API

ما از Composition API درون یک پروژه Vue2.x با کمک گرفتن از یک پلاگین موجود استفاده می‌کنیم.

ابتدا باید App خود را با استفاده از Vue CLI بسازیم:

vue create composition-todo

سپس باید پلاگین را از خط فرمان نصب کنیم:

yarn add @vue/composition-api

پلاگین را از فایل main.js با کد زیر مقداردهی می‌کنیم:

1import Vue from 'vue'
2import App from './App.vue'
3import CompositionApi from '@vue/composition-api'
4
5Vue.config.productionTip = false
6Vue.use(CompositionApi)
7
8new Vue({
9  render: h => h(App),
10}).$mount('#app')

این تنها کاری است که برای آغاز کار با این API نیاز داشتیم. در ادامه به توضیح روش استفاده از reactive ،ref ،computed ،‌Vue lifecycle و موارد دیگر خواهیم پرداخت. در ادامه کامپوننت جدید خود را درون فایل app.vue که به صورت واکشی از API ایمپورت می‌شود، خواهیم ساخت و کد زیر را می‌نویسیم:

1<template>
2  <div id="app">
3    <section>
4      <input type="text" v-model="state.todo" />
5      <ul>
6        <li v-for="(todo, i) in state.todolist" :key="i">{{todo}}</li>
7      </ul>
8    </section>
9    <button @click="addTodo">Add Todo</button>
10  </div>
11</template>
12<script>
13import { reactive } from "@vue/composition-api";
14export default {
15  setup() {
16    const { state, addTodo } = useOurTodo();
17    return {
18      state,
19      addTodo
20    };
21  }
22};
23function useOurTodo() {
24  let state = reactive({
25    todo: "",
26    todolist: []
27  });
28  function addTodo() {
29    state.todolist.push(state.todo);
30    state.todo = "";
31  }
32  return {
33    state,
34    addTodo
35  };
36}
37</script>
38<style lang="sass">
39</style>

اگر به کد فوق دقت کنید، می‌بینید که یک تابع راه‌اندازی نوشته شده و مشخصات داده‌های واکنشی تنظیم و مقدار آن بازگشت یافته است. به کمک API می‌توانیم ساختاری بسیار خواناتر و با قابلیت استفاده مجدد بنویسیم که بسیار متفاوت از ساختار موجود قبلی Options API است. اینک کد خود را می‌توانیم به ماژول‌های کوچک تقسیم کنیم.

مقایسه با Options API

اینک منطق را به بخش‌های مختلف تقسیم می‌کنیم. تغییرهای مورد نظرمان را طوری انجام می‌دهیم که سازمان‌دهی بیشتری ایجاد شود.

1<template>
2  <div id="app">
3    <section>
4      <h3>My Todo List</h3>
5      <input type="text" v-model="state.todo" />
6      <ul>
7        <li v-for="(todo, i) in state.todolist" :key="i">
8          {{todo}}
9          <button @click="removeTodo(i)">x</button>
10        </li>
11      </ul>
12    </section>
13    <button @click="addTodo">Add Todo</button>
14  </div>
15</template>
16
17<script>
18import { reactive } from "@vue/composition-api";
19export default {
20  setup() {
21    const { state, addTodo, removeTodo } = useOurTodo();
22    return {
23      state,
24      addTodo,
25      removeTodo
26    };
27  }
28};
29
30function useOurTodo() {
31  let state = reactive({
32    todo: "",
33    todolist: []
34  });
35
36  function addTodo() {
37    state.todolist.push(state.todo);
38    state.todo = "";
39  }
40  function removeTodo(i) {
41    state.todolist.splice(i);
42  }
43  return {
44    state,
45    addTodo,
46    removeTodo
47  };
48}
49</script>
50
51<style lang="sass">
52</style>

اینک می‌بینید که تغییرهای بیشتری در کد ایجاد شده است. بدین ترتیب می‌توانیم روش تمیزتری برای نوشتن کد داشته باشیم که برای افزایش سازمان‌دهی و ماژوله‌سازی کد مفید است به طور مشابه می‌توانیم از قابلیت‌های دیگر ارائه شده از سوی composition API مانند props ،watchers ،‌context و قلاب‌های چرخه عمری نیز استفاده کنیم.

سخن پایانی

در این راهنما با روش بهبود کد آشنا شدیم، اما هدف از این مقاله ارائه نمونه عملی از اهمیت جداسازی کد است. بدین ترتیب دیگر لزومی ندارد که بدانیم کدام داده‌ها یا مشخصه‌ها یا متدها به کدام کامپوننت تعلق دارند، کافی است آن‌ها را گروه‌بندی کنیم تا خواناتر، با قابلیت استفاده مجدد بیشتر و ماژولارتر شوند.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های جاوا اسکرپیت
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش JavaScript ES6 (جاوااسکریپت)
• آموزش Vue.js — مجموعه مقالات مجله فرادرس
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس

==