ew-responsive-store Making Session Storage Data Reactive

اگر پروژه شما نیاز به استفاده از ذخیره سازی جلسه دارد (یا localStorage یا sessionStorage) برای ماندگاری داده‌ها، و شما می‌خواهید که داده‌ها پس از به‌روزرسانی صفحه حفظ شوند، در حالی که هنگام تغییر داده‌ها، نمای به‌طور خودکار به‌روزرسانی شود، من به شدت توصیه می‌کنم از ew-responsive-store کتابخانه اندازه آن کمتر از 1 کیلوبایت است و استفاده از آن بسیار آسان است. تنها با یک فراخوانی تابع، می‌توانید داده‌های ذخیره‌سازی جلسه را واکنش‌پذیر کنید، که می‌تواند برای هر پروژه مبتنی بر چارچوب، حتی پروژه‌های جاوا اسکریپت بومی اعمال شود. این کتابخانه همچنین شامل آزمون های واحد جامع و استنتاج نوع است.

نصب و راه اندازی

ابتدا باید آن را نصب کنید ew-responsive-store بسته بندی با استفاده از دستور زیر می توانید آن را نصب کنید:

npm install ew-responsive-store --save-dev
# Or using pnpm
pnpm add ew-responsive-store
# Or using yarn
yarn add ew-responsive-store

استفاده

1. استفاده اولیه

هسته اصلی ew-responsive-store صادرات بسته به دو روش: parseStr و useStorage. را useStorage روش برای واکنش پذیر کردن داده های ذخیره سازی جلسه استفاده می شود.

ارزش های اساسی

می توانید استفاده کنید useStorage برای ایجاد مقادیر اولیه واکنشی به عنوان مثال، فرض کنید یک شمارنده در آن ذخیره شده است localStorage:

import { useStorage } from 'ew-responsive-store';

// Initialize the count with a default value of 0
const count = useStorage('count', 0);

// Modify the count value
count.value++;  // count value becomes 1

کد قالب Vue:

<template>
  {{ count }}
   @click="count++">Click Me
template>

<script setup>
import { useStorage } from 'ew-responsive-store';

const count = useStorage('count', 0);
script>

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

ارزش های شی

شما همچنین می توانید اشیاء واکنشی را به روشی مشابه ذخیره کنید:

import { useStorage } from 'ew-responsive-store';

// Initialize the userInfo object
const userInfo = useStorage('user', { name: 'eveningwater' });

// Modify the userInfo object
userInfo.value.name = 'john';  // userInfo's name property becomes 'john'

کد قالب Vue:

<template>
  {{ userInfo.name }}
   @click="userInfo.name="xiaozhang"">Click Me
template>

<script setup>
import { useStorage } from 'ew-responsive-store';

const userInfo = useStorage('user', { name: 'eveningwater' });
script>

هنگامی که شما تغییر دهید name دارایی از userInfo، نمای به طور خودکار به روز می شود و داده ها در ذخیره سازی جلسه ذخیره می شوند.

مقادیر آرایه

شما همچنین می توانید آرایه ها را ذخیره کنید، و آنها نیز واکنشی خواهند بود:

import { useStorage } from 'ew-responsive-store';

// Initialize an array
const countList = useStorage('countList', [1, 2, 3]);

// Modify the array
countList.value.push(4);  // The array becomes [1, 2, 3, 4]

کد قالب Vue:

<template>
  
 v-for="item in countList" :key="item">{{ item }}
   @click="countList.pop()">Click Me
template>

<script setup>
import { useStorage } from 'ew-responsive-store';

const countList = useStorage('countList', [1, 2, 3]);
script>

2. پیکربندی و بهینه سازی

Deep Watch را غیرفعال کنید

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

import { useStorage } from 'ew-responsive-store';

// Initialize count with deep watching disabled
const count = useStorage('count', 0, { deep: false });

// Modify count
count.value++;  // count value becomes 1

تغییر نوع فضای ذخیره‌سازی جلسه

به طور پیش فرض، useStorage استفاده می کند localStorage برای ذخیره سازی مداوم اگر می خواهید استفاده کنید sessionStorage در عوض، می توانید آن را در پیکربندی مشخص کنید:

import { useStorage } from 'ew-responsive-store';
import { StoreType } from 'ew-responsive-store/typings/core/enum';

const count = useStorage('count', 0, { deep: false, storage: StoreType.SESSION });

// Modify count
count.value++;  // count value becomes 1, and the data is stored in sessionStorage

مشاهده ارزش اولیه را کنترل کنید

به طور پیش فرض، useStorage به تغییرات مقدار اولیه گوش می دهد. اگر نمی‌خواهید تغییرات مقدار اولیه را مشاهده کنید، می‌توانید آن را با عبور دادن کنترل کنید immediate پارامتر:

import { useStorage } from 'ew-responsive-store';
import { StoreType } from 'ew-responsive-store/typings/core/enum';

// Don't listen to changes in the initial value
const count = useStorage('count', 0, { deep: false, immediate: false });

// Only the next change will be watched
count.value++;  // count value becomes 1

3. parseStr روش

را parseStr روش برای تجزیه مقادیر رشته استفاده می شود. این دو حالت تجزیه را ارائه می دهد:

• EVAL: مشابه eval متد، که کد جاوا اسکریپت را در رشته اجرا می کند.
• JSON: مشابه JSON.parse، برای تجزیه رشته های با فرمت JSON مفید است.

کد مثال:

import { parseStr } from 'ew-responsive-store';
import { parseStrType } from 'ew-responsive-store/typings/core/enum';

// Parse a JSON string
const testJSONData = parseStr('{"name":"eveningwater"}'); 
console.log(testJSONData);  // { name: "eveningwater" }

// Execute JavaScript code from a string
const testEvalData = parseStr('console.log("hello, eveningwater")', parseStrType.EVAL); 
// The console will log: hello, eveningwater

4. پیکربندی و استفاده بیشتر

از آنجایی که ew-responsive-store بر روی سیستم واکنشی Vue ساخته شده است، شما می توانید با ارسال پارامترهای مختلف برای عملکرد زیرین ساعت، آن را به روش های پیشرفته تری پیکربندی کنید. برای کسب اطلاعات بیشتر در مورد پارامترها و استفاده، می توانید به مستندات Vue Reactivity API مراجعه کنید.