۲۱ بازدید

آخرین به‌روزرسانی: ۱۹ دی ۱۴۰۲

زمان مطالعه: ۶ دقیقه

«پینیا» (Pinia) نوعی کتابخانه مدیریت حالت قدرتمند محسوب می‌شود که برای توسعه‌دهندگان «Vue» طراحی شده و هدف آن ساده کردن مدیریت حالت در برنامه است. Pinia با رویکرد کاربرپسند خود، وظایف مدیریت حالت را ساده می‌کند و تجربه‌ای یکپارچه را ارائه می‌دهد. این کتابخانه جاوا اسکریپت به دلیل کارایی و سهولت استفاده از مابقی رقبای خود متمایز است و آن را تبدیل به ابزاری حرفه‌ای برای کسانی می‌کند که به دنبال توسعه برنامه Vue خود هستند؛ اما Pinia چیست و چه رسالتی در دنیای توسعه وب به عهده دارد؟ در این مطلب از «مجله فرادرس» این بار می‌خواهیم در رابطه با کتابخانه کنترل و مدیریت حالت Pinia مطالبی را ارائه داده و در کنار توصیف این کتابخانه، پروژه‌ای ساده با آن پیاده‌سازی کنیم.

Pinia چیست؟

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

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

درک مفاهیم اساسی Pinia برای به حداکثر رساندن مزایای آن بسیار اهمیت دارد که در زیر به این مفاهیم اساسی پینیا اشاره شده است:

• «Getters»: گیرنده‌ها ابزارهای Pinia برای استخراج و تحویل مقادیر خاص از حالت «ذخیره‌سازی» (Store) هستند. با تعریف گیرنده‌ها، می‌توان به طور مؤثر به داده‌ها دسترسی داشت و بدون دست‌کاری مستقیم در وضعیت اصلی، این دسترسی را ایجاد کرد. گیرنده‌ها را می‌توان به عنوان ویژگی‌های سفارشی طراحی شده برای حالت ذخیره‌سازی در نظر گرفت.
• «Actions»: اقدامات نقشی محوری در Pinia دارند و به کاربر امکان می‌دهند حالت ذخیره‌سازی را به وسیله عملیات ناهم‌زمان یا هم‌زمان تغییر دهد. آن‌ها به عنوان ارتباط بین اجزای برنامه کاربر و حالت ذخیره‌سازی عمل کرده و تضمین می‌کنند که تغییرات حالت از الگوهای قابل پیش‌بینی و بهترین شیوه‌ها پیروی می‌کند.
•  «Store»: مکان یا حالت ذخیره‌سازی هسته اصلی Pinia است که وضعیت برنامه، دریافت‌کننده‌ها، اقدامات و جهش‌ها (در صورت وجود) را در برمی‌گیرد. این بخش از پینیا به عنوان نوعی کانتینر متمرکز عمل کرده و وضعیت برنامه را در مکانی حفظ می‌کند و آن را به راحتی در سراسر برنامه قابل دسترسی خواهد کرد.
• «State»: این اصطلاح که به معنای حالت یا وضعیت است به داده‌های مدیریت شده به وسیله Store اشاره دارد. State در اصل نوعی از داده‌های واکنشی است که کامپوننت‌های برنامه برای ارائه آخرین اطلاعات به کاربر به آن تکیه می‌کنند. استفاده از شی State در Store به کاربر امکان می‌دهد تا داده‌ها را به طور یکپارچه مدیریت کرده و بین اجزا یا همان کامپوننت به اشتراک بگذارد.

تفاوت Vuex و Pinia چیست؟

Vuex یکی از رقبای برجسه پینیا محسوب می‌شود؛ اما سوال اصلی اینجاست که تفاوت Vuex و Pinia چیست و کدام انتخاب بهتری خواهد بود؟ انتخاب بین Pinia و Vuex برای افراد توسعه‌دهندگان از اهمیت خاصی برخوردار است. در حالی که Vuex به عنوان نوعی راه‌حل قابل‌اعتماد و قدرتمند برای توسعه‌دهندگان Vue است، Pinia خود را به وسیله رویکرد مدرن و مینیمالیست از آن متمایز می‌کند. Pinia از سیستم واکنش‌پذیری Vue برای مدیریت وضعیت استفاده کرده و نیاز به وابستگی‌های خارجی را از بین می‌برد. این رویکرد متمرکز تضمین می‌کند که اکوسیستم پینیا کارآمد باقی می‌ماند و از انجام کارهای غیرضروری جلوگیری می‌کند. همچنین تعیین نوع پویا و پشتیبانی قوی از «تایپ اسکریپت» (TypeScript) به وسیله پینیا، تشخیص زودهنگام خطا را در حین توسعه امکان‌پذیر کرده و به توسعه برنامه‌های انعطاف‌پذیرتر با اشکالات کمتر کمک می‌کند. این کتابخانه جدید چه برای پروژه‌های جدید و چه برای پروژه‌های قدیمی Vue که نیاز به تغییر دارند، بسیار مناسب است و مدیریت حالت کارآمد را بدون به خطر انداختن انعطاف‌پذیری یا عملکرد برنامه ارائه می‌دهد.

ساخت اپلیکیشن ساده Vue با Pinia

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

پیش‌نیاز های ساخت برنامه با پینیا

کار ساخت برنامه ساده با پینیا با تنظیم محیط موردنیاز برای پروژه به وسیله نصب «Vue CLI» شروع خواهد شد که برای این هدف باید دستورات خاصی در ترمینال وارد شوند. برای نصب Vue CLI و همچنین ایجاد پوشه پروژه با استفاده از Vue CLI باید دستور زیر اجرا شود:

1# To install Vue CLI:
2npm install -g @vue/cli
3
4# To create the project folder with Vue CLI:
5vue create pinia-todo-app

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

در این مثال از ساخت برنامه با پینیا از تنظیمات پیش‌فرض «Vue 3» استفاده خواهیم کرد. حال در ادامه این مطلب از مجله فرادرس، باید به نصب Pinia در پوشه پروژه خود بپردازیم که این کار با دستور زیر انجام می‌شود:

1cd pinia-todo-app
2npm install pinia

دستور بالا پایه و اساس پروژه را ایجاد می‌کند و به کاربر امکان می‌دهد از Pinia برای مدیریت مؤثر حالت در برنامه Vue خود استفاده کند.

تنظیمات فایل ها برای سفارشی سازی برنامه

برای تکمیل این پروژه ساده، تنها باید تنظیماتی در چند فایل انجام شود. با ایجاد فایلی به نام store.js

در زیر پوشه src

کار تنظیمات را شروع خواهیم کرد. این فایل با استفاده از مفاهیم اصلی Pinia، افزودن و حذف موارد را در فهرست کارها مدیریت می‌کند.

1// src/store.js
2import { defineStore } from "pinia";
3
4export const useTodoStore = defineStore("todo", {
5  state: () => ({
6    todos: [],
7  }),
8  actions: {
9    addTodo(todoText) {
10      this.todos.push({ id: Date.now(), text: todoText });
11    },
12    removeTodo(todoId) {
13      this.todos = this.todos.filter((todo) => todo.id !== todoId);
14    },
15  },
16});

با این حال، سفارش سازی این فایل به‌تنهایی کافی نیست. باید بین فایل store.js

و App.vue

ارتباط برقرار شود. برای رسیدن به این هدف، فایل src/App.vue

را باید به صورت زیر تغییر داد:

1// src/App.vue
2<script>
3import { useTodoStore } from './store';
4
5export default {
6 data() {
7   return {
8     todoText: '',
9   };
10 },
11 computed: {
12   todos() {
13     return useTodoStore().todos;
14   },
15 },
16 methods: {
17   addTodo() {
18     if (this.todoText.trim() !== '') {
19       useTodoStore().addTodo(this.todoText);
20       this.todoText = '';
21     }
22   },
23   removeTodo(todoId) {
24     useTodoStore().removeTodo(todoId);
25   },
26 },
27};
28</script>

منطق برنامه فوق ساده است. رویدادهای تعریف‌شده در store.js

همان‌طور که در فایل App.vue

مشخص‌شده، رخ می‌دهد. اساساً، App.vue

به عنوان مکانیزم کنترل برنامه عمل می‌کند.

بهتر است برای معنی دادن به برنامه خود، قالب‌ها و سبک‌ها را تنظیم و ترکیب کنیم. برای رسیدن به این هدف، فایل App.vue

را باید به صورت زیر تغییر داد:

1// src/App.vue
2<template>
3 <div>
4   <h1>برنامه لیست کارها با پینیا -  مجله فرادرس</h1>
5   <input v-model="todoText" @keyup.enter="addTodo"
6    placeholder="هدف شما چیست؟" />
7
8   <ul>
9     <li v-for="todo in todos" :key="todo.id">
10       {{ todo.text }} <button @click="removeTodo(todo.id)">Done!</button>
11     </li>
12   </ul>
13 </div>
14</template>
15
16<script>
17import { useTodoStore } from './store';
18
19export default {
20 data() {
21   return {
22     todoText: '',
23   };
24 },
25 computed: {
26   todos() {
27     return useTodoStore().todos;
28   },
29 },
30 methods: {
31   addTodo() {
32     if (this.todoText.trim() !== '') {
33       useTodoStore().addTodo(this.todoText);
34       this.todoText = '';
35     }
36   },
37   removeTodo(todoId) {
38     useTodoStore().removeTodo(todoId);
39   },
40 },
41};
42</script>
43
44<style>
45// Your styles...
46</style>

با اعمال تغییرات بالا، اکنون نوعی برنامه کامل داریم که از مفاهیم اصلی Pinia برای مدیریت وضعیت، اضافه کردن و حذف وظایف از فهرست کارها استفاده می‌کند؛ اما با این حال هنوز هم یک مرحله نهایی باقی‌مانده است. باید فایل main.js

در پوشه src

به‌روز شود تا پیکربندی‌های لازم برای برنامه را در بر بگیرد که این کار به صورت زیر انجام خواهد شد:

1// src/main.js
2import { createApp } from "vue";
3import { createPinia } from "pinia";
4import App from "./App.vue";
5
6const pinia = createPinia();
7
8const app = createApp(App);
9app.use(pinia);
10app.mount("#app");

تنظیمات بالا تضمین می‌کند که همه‌چیز برای آزمایش برنامه در جای خود قرار دارد.

اجرای برنامه pinia

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

با اجرای دستور فوق برنامه در مرورگر و در آدرس مشخصی (اینجا http://localhost:8080/

 ) باز خواهد شد که رابط برنامه ساخته شده را نشان می‌دهد:

حال خروجی نهایی برنامه ساخته شده ما در مرورگر (در آدرس http://localhost:8080/

 ) قابل‌مشاهده خواهد بود.

پینیا برای چه کسانی مناسب است؟

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

سخن پایانی

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

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