مقدمه ای بر Pinia در Vue.js

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

نکات کلیدی

• Pinia یک کتابخانه مدیریت دولتی برای Vue است که با تمرکز بر مینیمالیسم و ​​رویکردی بصری، سادگی و کارایی را برای توسعه برنامه به ارمغان می آورد.
• مفاهیم اصلی Pinia شامل دریافت‌کننده‌ها، اکشن‌ها، ذخیره‌سازی و وضعیت است که به توسعه‌دهندگان اجازه می‌دهد تا داده‌ها را به‌طور مؤثری در اجزای Vue خود مدیریت و به اشتراک بگذارند.
• در مقایسه با Vuex، Pinia با استفاده از سیستم واکنش پذیری Vue و ارائه پشتیبانی دقیق تایپ و TypeScript برای برنامه های قوی تر با اشکالات کمتر، رویکرد مدرن و مینیمالیستی را ارائه می دهد. این یک گزینه مناسب برای پروژه های جدید یا مهاجرت از Vuex است.

آیا شما یک توسعه دهنده Vue هستید که به دنبال ساده سازی مدیریت ایالت خود و ارتقای توسعه برنامه خود به ارتفاعات جدید هستید؟ به Pinia، کتابخانه مدیریت ایالتی که بازی را تغییر می دهد برای علاقه مندان به Vue سلام کنید.

نگاهی گام به گام به مفاهیم اصلی Pinia بیندازید و ببینید چگونه می توانید پتانسیل آن را باز کنید. نحوه مقایسه این کتابخانه با Vuex را بیاموزید و یاد بگیرید که چگونه یک برنامه ساده Pinia ایجاد کنید.

پینیا چیست؟

Pinia یک کتابخانه مدیریت دولتی است که به طور ویژه برای Vue ساخته شده است و برای ارائه سادگی و کارایی بی نظیر به پروژه های Vue شما طراحی شده است. Pinia که برای ارائه یک تجربه یکپارچه برای توسعه دهندگان Vue طراحی شده است، از بهترین شیوه های مدیریت دولتی مدرن الهام می گیرد و در عین حال بسیار سبک و ساده است تا در برنامه های شما ادغام شود.

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

مفاهیم اصلی پینیا

برای استفاده بیشتر از Pinia، درک مفاهیم اولیه آن ضروری است.

گیرندگان

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

اقدامات

اکشن‌ها نقش مهمی در Pinia دارند و شما را قادر می‌سازند تا با انجام عملیات ناهمزمان یا همزمان، وضعیت فروشگاه را تغییر دهید. آنها به عنوان پل بین اجزای برنامه شما و فروشگاه عمل می کنند و تضمین می کنند که جهش های حالت از الگوهای قابل پیش بینی پیروی می کنند و به بهترین شیوه ها پایبند هستند.

فروشگاه

این فروشگاه نشان دهنده قلب Pinia است و وضعیت برنامه، دریافت کننده ها، اقدامات و جهش ها (در صورت وجود) را در بر می گیرد. این به عنوان یک منبع منفرد از حقیقت عمل می کند و حالت برنامه شما را متمرکز نگه می دارد و به راحتی در تمام اجزای شما قابل دسترسی است.

حالت

State به داده هایی اشاره دارد که فروشگاه شما مدیریت می کند. این داده‌های واکنشی است که اجزای شما برای نمایش به‌روزترین اطلاعات به کاربر به آن تکیه می‌کنند. با استفاده از شیء حالت در فروشگاه، می‌توانید به‌طور یکپارچه داده‌ها را در بین اجزا مدیریت کرده و به اشتراک بگذارید.

در مورد Vuex چطور؟

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

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

اگر یک پروژه جدید Vue را شروع می کنید یا قصد مهاجرت از Vuex را دارید، Pinia یک جایگزین جذاب ارائه می دهد که مدیریت ایالت را بدون به خطر انداختن انعطاف پذیری یا عملکرد ساده می کند.

برنامه ساده Vue با استفاده از Pinia

برای یادگیری همه چیز در مورد Pinia، سعی کنید یک نمونه برنامه بسازید. یک مدیر لیست کارهای اولیه کاندیدای خوبی است. یک برنامه لیست کارها دارای ساختار ساده ای است که در آن کاربران می توانند کارهای انجام شده را اضافه کنند، تکمیل آنها را علامت گذاری کرده و نشان دهند، و در صورت نیاز کارها را حذف و ویرایش کنند. Pinia ابزارهایی را که برای مدیریت وضعیت برای چنین برنامه هایی نیاز دارید فراهم می کند.

پیش نیازها

ابتدا باید محیط لازم برای این پروژه را با Vue CLI آماده کنید.

# To install Vue CLI:
npm install -g @vue/cli

# To create the project folder with Vue CLI:
vue create pinia-todo-app

در این مرحله می توانید در ترمینال ببینید که باید یک پیش تنظیم را انتخاب کنید. می توانید با انتخاب Vue 3 از تنظیمات پیش فرض ادامه دهید. این مثال با استفاده از Vue 3 ادامه خواهد یافت.

اکنون می توانید Pinia را در پوشه پروژه خود نصب کنید:

cd pinia-todo-app
npm install pinia

فایل های خود را تنظیم کنید

برای تکمیل این نمونه پروژه فقط باید چند فایل را ویرایش کنید.

ابتدا فایلی به نام store.js در زیر پوشه src ایجاد کنید. این فایل مواردی را که به لیست کارها اضافه می کنید، نگه می دارد، اضافه و حذف می کند. تمام این کارها را با استفاده از مفاهیم اصلی Pinia انجام می دهد.

// src/store.js
import { defineStore } from "pinia";

export const useTodoStore = defineStore("todo", {
  state: () => ({
    todos: [],
  }),
  actions: {
    addTodo(todoText) {
      this.todos.push({ id: Date.now(), text: todoText });
    },
    removeTodo(todoId) {
      this.todos = this.todos.filter((todo) => todo.id !== todoId);
    },
  },
});

اما البته این فایل به تنهایی کافی نیست. باید فایل store.js را با App.vue پیوند دهید. برای انجام این کار، فایل src/App.vue را به صورت زیر تغییر دهید:

// src/App.vue
<script>
import { useTodoStore } from './store';

export default {
 data() {
   return {
     todoText: '',
   };
 },
 computed: {
   todos() {
     return useTodoStore().todos;
   },
 },
 methods: {
   addTodo() {
     if (this.todoText.trim() !== '') {
       useTodoStore().addTodo(this.todoText);
       this.todoText = '';
     }
   },
   removeTodo(todoId) {
     useTodoStore().removeTodo(todoId);
   },
 },
};
</script>

منطق اینجا کاملاً ساده است. رویدادهایی که در store.js تعریف می کنید همانطور که در فایل App.vue مشخص کرده اید اتفاق می افتد. به نوعی مانند فایل App.vue به عنوان مکانیزم کنترل شما عمل می کند.

البته به این ترتیب این برنامه هیچ معنایی ندارد زیرا شما از هیچ قالب یا سبکی استفاده نکرده اید. برای افزودن آنها می توانید فایل App.vue را به صورت زیر تغییر دهید.

// src/App.vue
<template>
 <div>
   <h1>My Pinia Todo List</h1>
   <input v-model="todoText" @keyup.enter="addTodo"
    placeholder="What is your goal?" />

   <ul>
     <li v-for="todo in todos" :key="todo.id">
       {{ todo.text }} <button @click="removeTodo(todo.id)">Done!</button>
     </li>
   </ul>
 </div>
</template>

<script>
import { useTodoStore } from './store';

export default {
 data() {
   return {
     todoText: '',
   };
 },
 computed: {
   todos() {
     return useTodoStore().todos;
   },
 },
 methods: {
   addTodo() {
     if (this.todoText.trim() !== '') {
       useTodoStore().addTodo(this.todoText);
       this.todoText = '';
     }
   },
   removeTodo(todoId) {
     useTodoStore().removeTodo(todoId);
   },
 },
};
</script>

<style>
// Your styles...
</style>

اکنون همه چیزهایی را که نیاز دارید دارید. با استفاده از قابلیت‌های مفهوم اصلی Pinia، می‌توانید وضعیت را بررسی کنید و موارد جدیدی را در لیست کارهایی که می‌خواهید اضافه و حذف کنید. اما آخرین مرحله باقی مانده است. شما باید فایل main.js را در پوشه src به روز کنید و موارد لازم را برای برنامه اضافه کنید.

// src/main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount("#app");

همه چیز مورد نیاز برای تست برنامه خوب است.

برنامه Example Pinia را اجرا کنید

برای دیدن نتیجه این لیست ساده اما آموزنده، از این دستور استفاده کنید:

npm run serve

یک رابط ساده و تمیز برای افزودن و حذف کارها خواهید دید:

پینیا چقدر مفید است؟

اگر به دنبال جریان روان و کارآمد داده در برنامه های خود هستید، Pinia باید ابزار ارزشمندی باشد. Pinia با ارائه واکنش پذیری، ایمنی نوع و معماری مدولار، مدیریت حالت را ساده کرده و بهره وری را افزایش می دهد.

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

منبع مقاله