راهنمای جامع پینیا

در اصل توسط من در miracool.hashnode.dev منتشر شده است

Pinia یک ابزار مدیریت حالت جدید برای vue js است. به دلیل سادگی، کارایی، مقیاس پذیری و انعطاف پذیری در جامعه vue js به طور گسترده پذیرفته شده است. با این حال، بسیاری از توسعه دهندگان Vue به دلیل اطلاعات محدود و درک بهتر از مزایای استفاده از پینیا، همچنان از Vuex استفاده می کنند.

در این مقاله، من توضیح خواهم داد که چگونه یک توسعه‌دهنده vue.js می‌تواند با پیاده‌سازی یک برنامه نمونه که برخی از موارد استفاده مورد نیاز هنگام کار با Pinia را دارد، به سرعت بهترین نتیجه را از Pinia دریافت کند. خوانندگان علاقه مند به Vue JS این مقاله را بسیار مفید خواهند یافت، و یک توسعه دهنده باتجربه Vue با دانش پینیا نیز بر دانش قبلی خود با استفاده از این فناوری بنا خواهد کرد.

پینیا چیست؟

Pinia یک راه حل مدیریت دولتی است که بر اساس مفهوم واکنش پذیری Vue JS است. در Vue JS، واکنش‌پذیری یک ویژگی اصلی است که به Vue JS اجازه می‌دهد یک سیستم ردیابی از راه دور برای داده‌هایی که واکنش‌پذیر هستند راه‌اندازی کند و در صورت تغییر در این ویژگی‌های داده، به‌طور خودکار رابط کاربری را به‌روزرسانی کند.
Pinia با ارائه راهی برای مدیریت وضعیت یک برنامه Vue.js به روشی واکنش‌گرا و کارآمد، بر روی این سیستم واکنش‌پذیری اصلی استوار است. با Pinia می‌توانید یک فروشگاه متمرکز تعریف کنید که تمام حالت‌ها را برای برنامه شما نگه می‌دارد و سپس از آن فروشگاه برای مدیریت داده‌های خود و به‌روزرسانی رابط کاربری در صورت نیاز استفاده کنید.
این یک رویکرد مؤثرتر، سازگارتر و مقیاس‌پذیرتر برای مدیریت وضعیت برنامه‌های Vue.js شما به منظور تسهیل فرآیند حفظ وضعیت برنامه ارائه می‌دهد. Pinia، که بر اساس Composition API ساخته شده است، نسبت به برنامه‌های مدیریت دولتی تثبیت‌شده‌تر مانند Vuex مزایای زیادی دارد.
Pinia با Vue 2 و Vue 3 سازگار است، بنابراین لازم نیست خود را با مشکلات مربوط به نسخه‌سازی به مشکل برسانید.

بیایید با راه اندازی فروشگاه Pinia در یک برنامه جدید Vue.js شروع کنیم

vue create pinia_tutorial

برای ادامه روی enter کلیک کنید و لطفاً راهنمای روی صفحه را برای تکمیل تنظیمات دنبال کنید. پس از تکمیل، این پیام ها از شما خواسته می شود.

🎉  Successfully created project pinia_tutorial.
👉  Get started with the following commands:
 cd pinia_tutorial

سی دی برای انتقال به این scalfold pinia_tutorial جدید و اجرای دستور بعدی برای افزودن pinia به کد پایه.

vue add pinia

انجام این کار به این ترتیب تضمین می کند که تمام تنظیمات مورد نیاز برای عملکرد خوب فروشگاه به طور خودکار برای شما انجام می شود، البته اگر از yarn یا npm برای نصب آن استفاده کنید. شما باید خودتان آن تنظیمات را به صورت دستی انجام دهید.
ممکن است پس از نصب خطای مسیر فایل وجود داشته باشد. وحشت نکنید؛ فقط سرویس را خاموش کنید و npm run serve یا yarn serve خود را بسته به چیزی که استفاده می کنید مجدداً اجرا کنید و باید یک برنامه بدون اشکال داشته باشید.

اکنون، بیایید چند مثال عملی واقعی و سریع در مورد ایجاد و استفاده از فروشگاه انجام دهیم.

store/index.js

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),
  getters: {
    double: (state) => state.count,
  },
  actions: {
    increment() {
      //In vuex you will have to create a mutaion to do this directly
      //but, it's allowed here because pinia preaches flexibility
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

از استفاده از vuex، باید حالت‌ها، جهش‌ها، دریافت‌کننده‌ها و اکشن‌ها وجود داشته باشد و شما مجاز به ایجاد تغییرات در داده‌های حالت از داخل یک عمل نیستید. برای انجام این کار، باید یک جهش برای به روز رسانی داده ها ایجاد کنید. اکنون مشکل بزرگ این است که pinia به شما اجازه می دهد تا تغییراتی را در وضعیت داده ها از داخل یک اقدام ایجاد کنید. اکنون کد بالا یک ذخیره‌کننده شمارنده است که برای افزایش یا کاهش مقدار شمارش تعریف شده است.

بیایید یک دکمه در HelloWorld.vue ایجاد کنیم تا بتوانیم نمایشی بصری از آنچه در تلاش برای رسیدن به آن هستیم داشته باشیم.

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <button @click="incrementHandler" class="btn base-primary">
      Increment
    </button>
    <button @click="decrementHandler" class="btn base-primary">
      Decrement
    </button>
  </div>
</template>

از قطعه کد بالا، دو دکمه با یک رویداد کلیک روی هر کدام وجود دارد. هدف ما ایجاد یک اکشن کلیکی است که در نهایت اقدامات را در فروشگاه Pinia ارسال می کند.

HelloWorld.vue
<script setup>
import { useCounterStore } from "../store";
import { computed } from "vue";

const store = useCounterStore();
const getCounter = computed(() => {
  return store.count;
});

const incrementHandler = () => {
  return store.increment();
};

const decrementHandler = () => {
  return store.decrement();
};
</script>

در Pinia، فروشگاه ها ماژول هستند، بنابراین قبل از استفاده باید آنها را وارد کنیم. دلیل اینکه useCounterStore وارد شده و به یک متغیر جدید اختصاص داده شد، سهولت استفاده بود. به جای ارسال اقدامات به روش vuex، به عنوان مثال، $store.dispatch(‘action_name’). Pinia به ما این امکان را می دهد که مستقیماً با “store.increment” که تمیزتر و بهتر است، اقدام را فعال کنیم.

در نتیجه، Pinia یک راه حل مدیریت حالت قوی و سازگار برای برنامه های Vue.js به طور کلی ارائه می دهد. به لطف API ساده، معماری منعطف، پشتیبانی از پلاگین ها و پشتیبانی از فروشگاه های سفارشی، یک گزینه فوق العاده برای برنامه های مختلف است. اگر به دنبال یک کتابخانه مدیریت دولتی کوچک و ساده برای برنامه Vue.js خود هستید، Pinia بدون شک چیزی است که باید به آن توجه کنید.