از Composition API ویو بیشتر بدانیم

چطوری کامپوننت‌ها رو با Composition API بنویسیم؟

توی ویو ۳ و تو کامپوننت‌ها، در کنار آپشن‌هایی مثل mounted ،data و methods، ما یک آپشن دیگه داریم به اسم setup. ما قراره کدهامون رو توی این آپشن بنویسیم:

export default {
  setup() {
  
  },

  // the "rest" of the component
  mounted() {},
  data() {},
}

این آپشن به صورت یک متد هست و کدهایی که توی اون می‌نویسیم قبل از ساخته شدن کامپوننت و قبل از متدهایی مثل mounted و beforeCreate اجرا میشن:

https://codepen.io/AliN11/embed/preview/jOBJjox?height=265&theme-id=dark&default-tab=js,result

توی متد setup می‌تونیم همه آپشن‌هایی که توی روش سنتی مثل data و methods و mounted و watch داشتیم رو داشته باشیم. با توجه به اینکه setup زودتر از قسمت دیگه‌ای اجرا میشه، ما نمی‌تونیم به بقیه اعضای کامپوننت مثل data و methods دسترسی داشته باشیم.

قبل از اینکه مثالمون رو با Composition API بنویسیم، می‌خوایم ببینیم چه چیزهایی می‌تونیم توی setup تعریف کنیم.

تعریف کردن پراپرتی توی setup

یک پراپرتی که قبلاً اون رو توی data تعریف می‌کردیم، توی setup به صورت زیر تعریف میشه (خط ۵):

import { ref } from 'vue'

export default {
  setup() {
>>     const x = ref(1);
  }
}

توی خط ۵ ما با استفاده از تابع درونی ویو به اسم ref داریم یک پراپرتی می‌سازیم. این تابع برای ساختن پراپرتی‌هایی استفاده میشه که reactive هستن. پراپرتی‌های reactive پراپرتی‌هایی هستن که وقتی مقدار اونها تغییر می‌کنه، فریم‌ورک متوجه میشه و واکنش نشون میده که باعث میشه برنامه پویایی داشته باشه. ما قبلاً پراپرتی‌هایی توی data می‌نوشتیم به صورت خودکار reactive می‌شدن.

هر نوع مقداری (آرایه، متن، آبجکت و ...) می‌تونه توی ref قرار بگیره.

این کد مشابه حالت زیر توی Options API هست:

data() {
  return {
    x: 1,
  }
}

برای اینکه پراپرتی x سرتاسر برنامه در دسترس باشه، باید توسط setup به خروجی داده بشه. خروجی setup باید یک آبجکت باشه:

import { ref } from 'vue'

export default {
  setup() {
    const x = ref(1);

>>     return { x }; // equivalent to { x: x }
  }
}

هر چیزی که توی این آبجکت باشه، بقیه جاهای برنامه مثل روش‌های قدیمی در دسترس هست:

<template>
>>   <p>{{ x }}</p>
</template>

<script>
export default {
  setup() {
    return {
>>       x: ref(1),
    }
  },
  mounted() {
>>     alert(this.x)
  }
};
</script>

همون طور که می‌بینیم x به صورت this.x توی بقیه بخش‌ها کامپوننت در دسترس هست. اما نکته‌ای که باید در نظر داشته باشیم اینه که اگه بخوایم یک پراپرتی رو داخل خود setup فراخونی کنیم دیگه از this استفاده نمی‌کنیم. چون مقدار this توی این متد کاملاً متفاوت هست با چیزی که انتظار داریم.

پراپرتی‌هایی که داخل خود setup به ref ساخته میشن همگی به صورت آبجکت هستن که برای دسترسی به مقدار اونها باید کلید value رو از پراپرتی بخونیم:

export default {
  setup() {
    const x = ref(1);

>>     console.log(x.value); // 1

>>     console.log(typeof x); // object

    return { x }
  },
  mounted() {
    alert(this.x) // 1
  }
}

تعریف کردن متد توی setup

متدهایی که قبلاً توی قسمت methods داشتیم رو می‌تونیم اینطوری تعریف کنیم:

setup() {
  const hello = (name) => `Hello ${name}`;

  // or
  function signup() {
    // ...
  }

  return { hello, signup }
}

و درست مثل روش‌های قبل می‌تونیم از اونها توی قسمت‌های مختلف کامپوننت استفاده کنیم:

<template>
>>   <p>{{ hello("Mario") }}</p>
</template>

<script>
export default {
  // ...
  mounted() {
>>     this.signup()
  },
}
</script>

تعریف کردن Watch توی setup

کافیه از تابع watch استفاده کنیم. برای مثال توی کد زیر می‌خوایم برای پراپرتی counter یک watch بنویسیم:

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

<script>
import { ref, watch } from 'vue';

export default {
setup() {
  const counter = ref(0);

>>   watch(counter, (newVal, oldValue) => {
    alert("Counter value was changed!");
  });

  return { counter }
},
</script>

حالا هر جایی از برنامه مقدار counter عوض بشه، تابعی که توی آرگومان دوم watch نوشتیم اجرا میشه. باید دقت کنیم که watch فقط برای پراپرتی‌های reactive کار می‌کنه. پس ما برای پراپرتی‌ها از ref استفاده می‌کنیم.

تعریف پراپرتی‌های Computed توی setup

برای این کار از تابع computed به صورت زیر استفاده می‌کنیم:

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

<script>
>> import { ref, computed } from 'vue'

export default {
setup() {
  const counter = ref(0);

>>   const dupCounter = computed(function() {
    return counter.value * 2
  });

  return { counter, dupCounter }
}
</script>

درست مثل پراپرتی‌های معمولی توی setup، پراپرتی‌های computed هم با .value قابل دسترسی هستن:

setup() {
  const counter = ref(0);

  const dupCounter = computed(function() {
    return counter.value * 2
  });

>>   console.log(dupCounter.value);
}

تعریف Lifecycle Hook کامپوننت‌ها توی setup

Lifecycle Hook ها مثل mounted رو می‌تونیم به صورت زیر تعریف کنیم. برای همه Hook های یک کامپوننت، یک معادل به صورت on[HookName] توی setup وجود داره. برای مثال mounted میشه onMounted:

>> import { onMounted } from 'vue'

export default {
setup() {
  onMounted(function() {
    alert('I mounted');
  });
},

هر چیزی که توی onMounted بنویسیم درست همون رفتارهایی داره که mounted داشت.

دسترسی به props توی setup

props که اطلاعاتی هستن که از بیرون به کامپوننت پاس داده میشن، به صورت زیر در دسترس هستن:

setup(props) {
  console.log(props)
}

خب حالا وقتشه مثالی که داشتیم رو با Composition API بنویسم. با استفاده از این ویژگی می‌خوایم ۳ موجودیتی که توی مثالمون داشتیم یعنی پست، دسته‌بندی و تگ رو منتقل کنیم به بخش‌های مجزا. پس کدهایی که توی روش سنتی داشتیم مثل mounted، پراپرتی‌های computed و یا watch رو باید منتقل کنیم به متد setup.

ابتدا همه ویژگی‌ها و قابلیت‌های مربوط به پست‌ها که توی کامپوننت وجود داره مثل پراپرتی posts توی data و getPosts توی methods رو جدا و منتقل می‌کنیم به بخش setup:

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const posts = ref([]);
    const getPosts = function() {
      posts.value = dataFromServer('/posts');
    }

    const searchPosts = function(query) {
      return posts.value.filter(item => item.title === query)
    }

    onMounted(function() {
      getPosts();
    });

    return { posts, getPosts, searchPosts }
  }

حالا بخش مربوط به دسته‌بندی‌ها و تگ‌ها رو هم اضافه کنیم:

import { ref, watch, onMounted } from 'vue'

export default {
  setup() {
    const posts = ref([]);
    const getPosts = function() {
      posts.value = dataFromServer('/posts');
    }
    const searchPosts = function(query) {
      return posts.value.filter(item => item.title === query)
    }
    onMounted(function() {
      getPosts();
    });

    const categories = ref([]);
    const getCategories = () => ...
    onMounted(function() {
      getCategories();
    });
    watch(posts, function() {
      getCategories();
    })
    
    const tags = ref([]);
    const getTags = () => ...;
    onMounted(function() {
      getTags();
    });
    watch(posts, function() {
      getTags();
    })

    return {
      posts,
      getPosts,
      searchPosts,

      categories,
      getCategories,

      tags,
      getTags,
    }
  },
}

خب الان تقریباً همه بخش‌ها (به استثناء بعضی از مواردی که از اونها صرف نظر کردیم) رو منتقل کردیم و بقیه قسمت‌های کامپوننت مثل data و methods خالی شدن. اما همونطور که می‌بینیم همه کدها جمع شدن توی متد setup که باعث شده این متد طولانی و شلوغ بشه. همچنین کدهای بی‌ربط هنوز کنار هم هستن و مشکلی رو که می‌خواستیم حل کنیم یعنی توسعه‌پذیر بودن کامپوننت هنوز میسر نشده. برای این مسئله هم راه حلی وجود داره.

به لطف قابلیت ماژول‌های ES6 ما می‌تونیم همه این بخش‌ها رو منتقل کنیم به فایل‌های جداگونه و بعد اون رو به setup اضافه کنیم.

ابتدا برای کدهایی که برای پست‌ها داشتیم یک فایل مجزا درست می‌کنیم. توی برنامه یک مسیر درست می‌کنیم به اسم composable تا همه فایل‌های رو توی اون قرار بدیم.

فایل Posts.js رو درست کنیم:

// src/composables/Posts.js
import { ref, onMounted } from 'vue';

export default function setup() {
  const posts = ref([]);
  const getPosts = function() {
    posts.value = dataFromServer('/posts');
  }
  const searchPosts = function(query) {
    return posts.value.filter(item => item.title === query)
  }
  onMounted(function() {
    getPosts();
  });

  return { posts, getPosts, searchPosts }
}

همونطور که می‌بینیم همه کدهای مربوط به پست‌ها رو بردیم توی فایل جداگونه خودش. انگار یک متد setup اختصاصی فقط برای پست‌ها.

حالا بخش دسته‌بندی‌ها رو منتقل کنیم به فایل جداگونه خودش:

// src/composables/Categories.js
import { ref, watch, onMounted } from 'vue'

export default function setup(posts) {
  const categories = ref([]);
  const getCategories = function() {
    categories.value = '/categories';
  }

  onMounted(function() {
    getCategories();
  });

  watch(posts, function() {
    getCategories();
  });

  return { categories, getCategories }
}

برای Tags:

// src/composables/Tags.js
import { ref, watch, onMounted } from 'vue'

export default function setup(posts) {
  const tags = ref([]);
  const getTags = () => '...';

  onMounted(function() {
    getTags();
  });
  watch(posts, function() {
    getTags();
  });

  return { tags, getTags }
}

مرحله بعد اینه که این فایل‌ها رو به کامپوننت وارد (import) کنیم و از اون‌ها توی قسمت setup استفاده کنیم:

// src/components/MyComponent.vue

import Posts from '../composables/Posts';
import Categories from '../composables/Categories';
import Tags from '../composables/Tags';

export default {
  setup() {
    const { posts, getPosts, searchPosts } = Posts();
    const { categories, getCategories } = Categories(posts);
    const { tags, getTags } = Tags(posts);

    return {
      posts,
      getPosts,
      searchPosts,

      categories,
      getCategories,

      tags,
      getTags,
    }
  },

توی خط‌های ۹ تا ۱۱ با استفاده از Object Destructuring آیتم‌هایی که مدنظرمون بود رو خوندیم و اضافه کردیم به setup و همچنین در انتها اونها رو return کردیم تا سرتاسر کامپوننت در دسترس باشن. همونطور که می‌بینیم متد setup خلوت‌تر شد و اینطوری برای توسعه هر قسمت کافیه به فایل مربوط به خودش مراجعه کنیم.

نتیجه‌گیری

همونطور که می‌دونیم Composition هم به معنی ترکیب هست و ما تونستیم قسمت‌های مختلف یک کامپوننت رو جدا کنیم و نهایتاً اون‌ها رو با کامپوننت ترکیب کنیم. اگه یک کامپوننت بزرگ داریم، برای کم کردن حجم و افزایش توسعه‌پذیری اون استفاده از Composition API گزینه مناسبی هست.

امیدوارم از این پست استفاده کرده باشین. روزتون خوش 😉

منابع: