store و persist در Alpine.js

درود به همه دوستان 👋

امروز میخوایم درباره store و پلاگین persist در alpine.js که برای مدیریت stateها به ساده‌ترین شکل ممکن هست صحبت کنیم.

این دو تا بهمون کمک می‌کنن تا stateها رو به صورت global مدیریت کنیم و اون‌ها رو به صورت محلی (local storage یا session storage) ذخیره کنیم،اینطوری حتی بعد از refresh صفحه هم stateها حفظ می‌شن.. برای اینکه بهتر متوجه بشیم چطور کار می‌کنن تو مثال اول یه شمارنده (counter) رو داریم و تو مثال دوم هم پیاده سازی دارک مود (dark mode) رو بررسی می‌کنیم.

پس همراه من باشید!

Alpine.js چیه و چرا store و persist مهم هستند؟

قبل از اینکه بریم سراغ بحث اصلی، یه توضیح کوتاه درباره Alpine.js بدم، Alpine.js یه کتابخونه کوچیک و سبکه که برای ساخت رابط‌های کاربری تعاملی استفاده می‌شه. اگه با فریم‌ورک‌هایی مثل Vue.js یا React کار کردین، Alpine.js رو می‌تونید به عنوان یه نسخه سبک‌تر و ساده‌تر از اون‌ها در نظر بگیرید. Alpine.js با استفاده از directiveهایی مثل x-data، x-bind و x-on بهمون کمک می‌کنه تا با کمترین کد ممکن، کامپوننت‌های تعاملی بسازیم.

حالا بیایم سراغ store و پلاگین persist:

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

• persist: این پلاگین بهمون کمک می‌کنه stateها رو به صورت محلی (local storage یا session storage) ذخیره کنیم، اینطوری حتی بعد از refresh صفحه هم stateها حفظ می‌شن.

مثال اول: یه شمارنده (counter) ساده با store

بیایم اول یه مثال ساده بزنیم: یه شمارنده که هر بار روی دکمه‌اش کلیک می‌کنیم، یه عدد بهش اضافه می‌شه.

<div x-data>
    <button x-on:click="$store.counter.increment()">
        increment
    </button>
    Count: <span x-text="$store.counter.count"></span>
</div>


<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('counter', {
            count: 0,

            increment() {
                this.count++;
            }
        });
    });
</script>

بیایم این کد رو به صورت کامل و قدم به قدم توضیح بدیم تا کاملاً متوجه بشید چیه داستانش:

۱. alpine:init

این event مخصوص Alpine.js هست و زمانی اجرا می‌شه که Alpine.js به طور کامل لود شده و آماده استفاده باشه.چرا این مهمه؟چون می‌خوایم مطمئن بشیم قبل از اینکه بخوایم store رو تعریف کنیم، Alpine.js به درستی لود شده و آماده کاره. اگه این کار رو نکنیم، ممکنه Alpine.js هنوز لود نشده باشه و خطا بگیریم.

۲. Alpine.store

این تابع یه store جدید در Alpine.js ایجاد می‌کنه.اولین پارامتر اسم store رو مشخص می‌کنه که اینجا اسم store رو counter گذاشتیم و دومین پارامتر یه آبجکت هست که stateها و متدهای store رو تعریف می‌کنه.

۳. count: 0

یه state به نام count تعریف کردیم و مقدار اولیه‌اش رو 0 قرار دادیم. این state می‌تونه هر جایی از برنامه استفاده بشه و مقدارش تغییر کنه.

۴. متد increment

یه متد به نام increment تعریف کردیم. هر بار که این متد فراخونی بشه، مقدار count رو یه واحد افزایش می‌ده.

چون از persist استفاده نکردیم، بعد از refresh صفحه، مقدار count به 0 برمی‌گرده.

اضافه کردن persist برای ذخیره‌سازی stateها:

حالا بیایم همین شمارنده رو با persist پیاده‌سازی کنیم تا بعد از refresh صفحه هم مقدارش حفظ بشه.

<div x-data>
    <button x-on:click="$store.counter.increment()">
        increment
    </button>
    Count: <span x-text="$store.counter.count"></span>
</div>

<!-- Alpine Plugins -->
<script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('counter', {
            count: Alpine.$persist(0).as('counter_count'),

            increment() {
                this.count++;
            }
        });
    });
</script>

این بار از Alpine.$persist استفاده کردیم تا مقدار count رو به صورت محلی ذخیره کنیم.

با این کار، حتی بعد از refresh صفحه هم مقدار count حفظ می‌شه.

مثال دوم: پیاده سازی دارک مود (dark mode)

حالا بیایم یه مثال کاربردی‌تر بزنیم: پیاده‌سازی دارک مود. توی برنامه‌هایی که از تم تاریک پشتیبانی می‌کنن، ما نیاز به یه state داریم برای ذخیره‌سازی وضعیت تم (روشن یا تاریک). این state باید به صورت global مدیریت بشه تا بتونیم ازش توی تمام کامپوننت‌ها استفاده کنیم. علاوه بر این، بهتره این state حتی بعد از refresh صفحه هم حفظ بشه تا کاربر مجبور نباشه هر بار تم مورد نظرش رو دوباره انتخاب کنه.

برای این کار، از store در Alpine.js استفاده می‌کنیم تا state مربوط به دارک مود رو به صورت global نگه داریم و از persist برای ذخیره‌سازی این state به صورت محلی استفاده می‌کنیم. اینطوری حتی بعد از refresh صفحه هم حالت تم برای کاربر حفظ می‌شه.

<!DOCTYPE html>
<html lang="en" dir="ltr" x-bind:class="{ 'dark': $store.darkMode.on }" x-data>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .card {
            background-color: #fff;
            color: #000;
        }

        .dark .card {
            background-color: #000;
            color: #fff;
        }
    </style>
</head>

<body>
    <div x-data>
        <button x-on:click="$store.darkMode.toggle()">
            <span x-text="$store.darkMode.on ? 'Light Mode' : 'Dark Mode'"></span>
        </button>
        <div class="card">
            این یه متن تستیه! حالت دارک مود رو امتحان کن.
        </div>
    </div>

    <!-- Alpine Plugins -->
    <script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>

    <!-- Alpine Core -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('darkMode', {
                on: Alpine.$persist(false).as('darkMode'),

                toggle() {
                    this.on = !this.on;
                }
            });
        });
    </script>

</body>

</html>

یه توضیح کلی میدم،با x-bind:class اومدیم به تگ html در صورت true بودن حالت دارک مود کلاس dark رو اضافه کردیم و یه دکمه هم داریم که با کلیک کردنش بین تم روشن و تاریک جابه‌جا میشیم..قسمت script هم که تو مثال اول صحبت کردیم دربارش..

یه نکته ایم توجه کنید که ما اینجا از طریق cdn اومدیم Alpine.js و پلاگین persist رو لود کردیم، اگه به صورت ماژول توی پروژه‌هاتون استفاده می‌کنید که احتمالا هم همین‌کارو میکنید ابتدا نصب‌شون کنید و بعد به شکل زیر پیش برید:

import Alpine from "alpinejs";
import persist from "@alpinejs/persist";

Alpine.plugin(persist);

document.addEventListener("alpine:init", () => {
    Alpine.store("darkMode", {
        on: Alpine.$persist(false).as("darkMode"),

        toggle() {
            this.on = !this.on;
        },
    });
});

window.Alpine = Alpine;

Alpine.start();

چه زمانی از store و persist استفاده کنیم؟

• store : زمانی که می‌خوایم stateها رو به صورت global مدیریت کنیم.

• persist : زمانی که می‌خوایم stateها رو حتی بعد از refresh صفحه هم نگه داریم، مثل ذخیره تنظیمات کاربر (دارک مود، زبان انتخابی، و غیره).

لینک‌های مرتبط:

alpinejs.dev

alpinejs.dev/plugins/persist

جمع‌بندی

امروز با هم یاد گرفتیم چطور از store و persist در Alpine.js استفاده کنیم. با store می‌تونیم stateها رو به صورت global مدیریت کنیم و با persist می‌تونیم اون‌ها رو حتی بعد از refresh صفحه هم نگه داریم. این قابلیت‌ها به خصوص برای چیزهایی مثل دارک مود یا ذخیره تنظیمات کاربر خیلی مفیدن.

اگر تا حالا با Alpine.js کار نکردین، امیدوارم این مقاله براتون انگیزه‌ای شده باشه تا یه سر به دنیای Alpine.js بزنید. و اگر قبلاً کار کردین، امیدوارم با store و persist آشنا شده باشین و بتونین ازشون توی پروژه‌هاتون استفاده کنین.

اگر سوالی داشتین یا خواستین بیشتر راجع به Alpine.js بدونین، تو کامنت‌ها بنویسید. خوشحال می‌شم کمکتون کنم! 😊

تا بعد، خدانگهدار!