با API ترکیب Vue 3.0 یک برنامه لیست خرید ایجاد کنید

این مقاله نشان می دهد که چگونه Vue Composition API راهی عالی برای خواندن و نگهداری بیشتر کد شما است. یک گزینه جایگزین برای API گزینه ها ، Composition API که در Vue 3 معرفی شده است روش ها و حالت م componentلفه را با دسترسی بیشتری کنترل می کند.

Composition API روشی جدید (و اختیاری) برای ایجاد و سازماندهی م componentsلفه ها در برنامه Vue 3 است. این اجازه می دهد تا منطق م componentلفه های واکنشی بصورت شهودی تری با اجازه گروه بندی همه کدهای یک ویژگی خاص (به عنوان مثال جستجو) تعریف شود. استفاده از API Vue Composition باعث می شود برنامه شما در بین چندین م scلفه مقیاس پذیرتر و قابل استفاده مجدد باشد.

در این مقاله ، ما یک برنامه لیست ساده خرید با API ترکیب Vue خواهیم ساخت.

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

پیش نیازها

برای این آموزش ، به موارد زیر احتیاج دارید:

• درک اساسی از HTML ، CSS ، JavaScript و Vue
• یک ویرایشگر متن
• یک مرورگر وب
• Node.js
• نمای CLI

راه اندازی برنامه Vue

اکنون با نصب Vue Cli شروع می کنیم:

npm install -g vue-cli

این دستور Vue را به صورت جهانی نصب می کند.

ما برای ساخت یک برنامه ساده از Vue CLI استفاده خواهیم کرد. برای انجام این کار ، ترمینال خود را باز کرده و موارد زیر را تایپ کنید:

vue create vueshoppinglist

پس از نصب ، با استفاده از وارد پوشه شوید cd vueshoppinglist و اجرا npm run serve.

با این کار یک سرور توسعه ایجاد می شود که به شما امکان می دهد برنامه خود را روشن کنید localhost: 8080.

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

API ترکیب Vue

برای نصب Composition API از ریشه پروژه خود ، موارد زیر را اجرا کنید:

npm install --save @vue/composition-api

پس از نصب موفقیت آمیز ، ما آن را به پروژه خود وارد خواهیم کرد.

تغییر src/main.vue برای ثبت جهانی Comi API در برنامه خود ، به طوری که بتوانیم از آن در تمام اجزای برنامه خود استفاده کنیم:

import Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from '@vue/composition-api'
Vue.config.productionTip = false
Vue.use(VueCompositionApi)
new Vue({
  render: h => h(App),
}).$mount('#app')

ایجاد رابط کاربر

ما به مولفه ای نیاز داریم که UI برنامه ما را در خود جای دهد. جدید ایجاد کنید ShoppingList.vue جز component در src/components/ فهرست را وارد کنید و موارد زیر را در پرونده جایگذاری کنید:

<template>
  <section>
    <div class="form-container">
      <h2>Add Item</h2>
      <form>
        <div>
          <label>Product name</label>
          <br />
          <input type="text" />
        </div>
        <div>
          <button type="submit" class="submit">Add Item</button>
        </div>
      </form>
    </div>
    <div class="list-container">
      <ul>
        <li>
          Shopping List app
          <span style="float:right;padding-right:10px;">
            <button>X</button>
          </span>
        </li>
      </ul>
    </div>
  </section>
</template>
<script>
export default {};
</script>
<style scoped>
input {
  width: 20%;
  height: 30px;
  border: 2px solid green;
}
.submit {
  margin: 10px;
  padding: 10px;
  border-radius: 0px;
  border: 0px;
  background: green;
  color: white;
}
ul li {
  list-style: none;
  border: 2px solid green;
  width: 30%;
  margin-top: 10px;
}
</style>

قطعه کد بالا دیگ بخار اولیه UI ما است. اکنون م componentلفه جدید خود را وارد خواهیم کرد ShoppingList.vue به App.vue همانطور که در زیر نشان داده شده است:

<template>
  <div id="app">
    <img alt="Shoppingd List" src="./assets/shopping.png">
    <shopping-list msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import ShoppingList from './components/ShoppingList.vue'
export default {
  name: 'App',
  components: {
    ShoppingList
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

کار با API ترکیب Vue

بیایید با وارد کردن کامپوزیت API به جز component خود شروع کنیم ShoppingList.Vue:

<script>
import { reactive } from "@vue/composition-api";
export default {};
</script>

در اینجا ، ما در حال وارد کردن هستیم reactive از API ترکیب Vue.

اکنون با تغییر الگوی خود برخی از شنوندگان رویداد را به برنامه اضافه خواهیم کرد:

<template>
  <section>
    <div class="form-container">
      <h2>My Shopping List App</h2>
      <form @submit.prevent="addItem">
        <div>
          <label> Product Name</label>
          <br />
          <input v-model="state.input" type="text" />
        </div>
        <div>
          <button type="submit" class="submit">Add Item</button>
        </div>
      </form>
    </div>
    <div class="list-container">
      <ul v-for="(Item,index) in state.Items" :key="index">
        <li>
          {{Item}}
          <span style="float:right;padding-right:10px;">
            <button @click="removeItem(index)">X</button>
          </span>
        </li>
      </ul>
    </div>
  </section>
</template>

Vue 3 از data و methods گزینه ای برای تعریف حالت و افزودن توابع به جای دسترسی به a setup روش. این روش بعد از قلاب چرخه حیات نامیده می شود beforeCreate و قبل از create.

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

<script>
  import { reactive } from "@vue/composition-api";
  export default {
  setup() {
      const { state, addItem, removeItem } = ItemList();
      return { state, addItem, removeItem };
    }
  };
</script>

پس از اعلام متغیرها و روش ها ، باید حالت جز component خود را تعریف کنیم:

<script>
import { reactive } from "@vue/composition-api";
export default {
setup() {
  const { state, addItem, removeItem } = ItemList();
  return { state, addItem, removeItem };
}
};
function ItemList() {
let state = reactive({
  input: "",
  Items: ["Grocery"]
});
return { state };
</script>

دولت در اینجا محدود به ItemList تابع. ما خودمان را تعریف می کنیم input بیان کنید که ما به قسمت ورودی خود متصل می شویم و همچنین تعریف می کنیم Items آرایه ای که همه ما را در خود جای می دهد Items.

بیایید تعریف کنیم addItem تابع:

<script>
import { reactive } from "@vue/composition-api";
export default {
setup() {
    const { state, addItem, removeItem } = ItemList();
    return { state, addItem, removeItem };
  }
};
function ItemList() {
  let state = reactive({
    input: "",
    Items: ["Grocery"]
  });
 let addItem = () => {
    state.Items.push(state.input);
    state.input = "";
  };
  return { state, addItem };
</script>

قابلیت add ، داده ها را در قسمت ورودی گرفته و با استفاده از روش push آنها را به داخل آرایه Items فشار می دهد.

بیایید حذف مورد را اجرا کنیم. ما نمایه را دریافت خواهیم کرد Item و سپس حذف کنید Item از آرایه کاربران با استفاده از روش splice:

<script>
import { reactive } from "@vue/composition-api";
export default {
setup() {
    const { state, addItem, removeItem } = ItemList();
    return { state, addItem, removeItem };
  }
};
function ItemList() {
  let state = reactive({
    input: "",
    Items: ["Grocery"]
  });
 let addItem = () => {
    state.Items.push(state.input);
    state.input = "";
  };

 let removeItem = i => {
    state.Items.splice(i, 1);
  };
  return { state, addItem, removeItem };
</script>

مهم است که همه آنچه که می خواهیم از الگو به آن دسترسی داشته باشیم توسط آن برگردانده شود هر دو itemList و setup() مواد و روش ها. در انتهای قطعه کد ، ما در حال بازگرداندن حالت یا روش هستیم.

برنامه لیست خرید ما اکنون کامل شده است:

نتیجه

سرانجام ، ما برنامه لیست خرید خود را با Vue 3 Composition API ساخته ایم. جالب است بدانید که چگونه از Composition API در Vue 2 استفاده می شود. یکی از مهمترین مزایای آن ، نحوه استفاده از روشها است و حالت م componentلفه بیشتر قابل دسترسی است و همچنین واکنش پذیری آن نیز بیشتر است.

امیدوارم چند نکته در مورد Vue یاد گرفته باشید. منو بزن توییتر اگر س anyال یا بازخوردی دارید

و در صورت تمایل ویژگی های جدیدی را به برنامه اضافه کنید ، زیرا این یک روش عالی برای یادگیری است. می توانید کد منبع را بررسی کنید اینجا.