import { Meta } from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/# UI Figma/# Lưu trữ dữ liệu'/>

# Làm việc với bộ nhớ (Storage)

Figma cung cấp hai cơ chế chính để lưu dữ liệu: bộ nhớ người dùng cục bộ và bộ nhớ tài liệu dùng chung. Thư viện cung cấp các trình bao bọc (wrapper) được định kiểu cho cả hai phương pháp, giúp truy cập và đồng bộ hóa thuận tiện.

## Backend (Backend / plugin/code.ts)

Về phía mã của plugin, cần phải khởi tạo các trình lắng nghe tin nhắn để đồng bộ hóa dữ liệu với giao diện.

### Khởi tạo
```typescript
import { setupStorage, setupClientStorage } from '@dxtmisha/figma-code'

// Kích hoạt trình lắng nghe cho cả hai loại bộ nhớ
setupStorage()
setupClientStorage()
```

### Sử dụng trực tiếp
Bạn có thể làm việc với dữ liệu bộ nhớ trực tiếp trong mã backend:

```typescript
import { FigmaStorage, FigmaClientStorage } from '@dxtmisha/figma-code'

// Bộ nhớ tài liệu dùng chung
const storage = FigmaStorage.getInstance<string>('project-theme')
storage.set('dark')

// Bộ nhớ người dùng cá nhân
const client = FigmaClientStorage.getInstance<boolean>('show-onboarding')
await client.set(true)
```

## Giao diện (UI / Iframe)

Trong giao diện plugin, dữ liệu có thể truy cập được thông qua các hook phản hồi tự động đồng bộ hóa với backend.

### Sử dụng phản hồi (Vue)
```typescript
import { useFigmaStorage, useFigmaClientStorage } from '@dxtmisha/figma-ref'

// Đồng bộ hóa với tài liệu
const { item: theme } = useFigmaStorage('project-theme', 'light')

// Đồng bộ hóa với cài đặt cá nhân của người dùng
const { item: isSeen } = useFigmaClientStorage('show-onboarding', false)

// Khi .value thay đổi, dữ liệu sẽ tự động được gửi đến Figma
theme.value = 'dark'
```
