Khi xây dựng một ứng dụng bằng khung Astro, bạn có thể tự hỏi làm cách nào để quản lý trạng thái ứng dụng hoặc chia sẻ nó giữa các thành phần và khung. Nano Stores là một trong những công cụ quản lý trạng thái tốt nhất cho Astro nhờ thực tế là nó hoạt động với React, Preact, Svelte, Solid, Lit, Angular và Vanilla JS.
Tìm hiểu cách quản lý trạng thái trong dự án Astro. Hãy làm theo các bước đơn giản để tạo một ứng dụng ghi chú cơ bản sử dụng Nano Stores để quản lý trạng thái và chia sẻ trạng thái của nó giữa React và Solid.js.
astro là gì?
Khung Astro cho phép bạn tạo các ứng dụng web dựa trên các khung giao diện người dùng phổ biến, chẳng hạn như React, Preact, Vue hoặc Svelte. Khung này sử dụng kiến trúc dựa trên thành phần nên mỗi trang trong Astro bao gồm một số thành phần.
Để tăng tốc độ tải trang, khung giảm thiểu việc sử dụng JavaScript phía máy khách và thay vào đó hiển thị trước các trang trên máy chủ.
Astro được thiết kế để trở thành công cụ hoàn hảo để xuất bản các trang web hướng đến nội dung. Hãy nghĩ đến các blog, trang đích, trang tin tức và các trang khác tập trung vào nội dung hơn là tính tương tác. Đối với các thành phần được đánh dấu là tương tác, khung sẽ chỉ gửi mã JavaScript tối thiểu cần thiết để kích hoạt tính tương tác này.
Cài đặt và cấu hình
Nếu bạn đã có một dự án Astro đang chạy, hãy bỏ qua phần này.
Tuy nhiên, nếu bạn không có dự án Astro, bạn sẽ cần tạo một dự án. Yêu cầu duy nhất là cài đặt Node.js trên máy phát triển cục bộ của bạn.
Để tạo một dự án Astro hoàn toàn mới, hãy khởi chạy dòng lệnh, điều hướng đến thư mục mà bạn muốn tạo dự án, sau đó chạy lệnh sau:
npm create astro@latest
Trả lời “y” để cài đặt Astro và cung cấp tên thư mục dự án của bạn. Bạn có thể tham khảo hướng dẫn thiết lập chính thức của Astro nếu gặp khó khăn trong quá trình thực hiện.
Khi bạn đã tạo xong dự án, hãy thực hiện lệnh sau (lệnh này sẽ thêm React vào dự án):
npx astro add react
Cuối cùng, cài đặt Nano Stores cho React bằng cách chạy lệnh sau:
npm i nanostores @nanostores/react
Vẫn ở trong thiết bị đầu cuối, hãy đi tới thư mục gốc của dự án và chạy ứng dụng bằng bất kỳ lệnh nào bên dưới (bất kỳ lệnh nào bạn sử dụng):
npm run dev
Hoặc:
yarn run dev
Hoặc:
pnpm run dev
Truy cập http://localhost:3000 trong trình duyệt web của bạn để xem bản xem trước trang web của bạn.
Bước tiếp theo sau khi thiết lập dự án Astro là tạo kho dữ liệu ứng dụng.
Tạo một cửa hàng ghi nhớ
Tạo một tệp có tên noteStore.js trong thư mục /src trong thư mục gốc của ứng dụng. Bên trong tệp này, hãy sử dụng hàm Atom() từ nanostores để tạo một kho lưu trữ:
import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
Hàm addNote() lấy ghi chú làm đối số và lưu nó vào kho ghi chú. Nó sử dụng toán tử trải rộng khi lưu trữ ghi chú để tránh làm thay đổi dữ liệu. Toán tử trải rộng là một phím tắt JavaScript để sao chép các đối tượng.
Tạo giao diện người dùng cho ứng dụng ghi chú
Giao diện người dùng sẽ chỉ bao gồm một đầu vào để tải xuống ghi chú và một nút mà khi nhấp vào sẽ thêm ghi chú vào cửa hàng.
Trong thư mục src/comComponents, tạo một tệp mới có tên NoteAddButton.jsx. Sau đó dán đoạn mã sau vào tập tin:
import {useState} from "react"
import {addNote, notes} from "../noteStore"export default function NoteAdder() {
const [userNote, setUserNote] = useState('')
return(
<>
<label htmlFor="note">Add a note: </label>
<input type="text" name="note" id="note"
onChange={(event) => setUserNote(event.target.value)} />
<button onClick={() => addNote(userNote)}>Add</button>
<ul>
{
$notes.map((note, index) => {
<li key={index}>{note}</li>
})
}
</ul>
</>
)
}
Mã này thêm ghi chú vào trạng thái của thành phần khi nhập dữ liệu đầu vào. Sau đó, khi nhấp vào nút, nó sẽ lưu ghi chú vào cửa hàng. Nó cũng lấy các ghi chú của cửa hàng và hiển thị chúng trong một danh sách không có thứ tự. Với cách làm này, ghi chú sẽ xuất hiện trên trang ngay khi bạn nhấp vào nút Lưu.
Bây giờ trong tệp Pages/index.astro, bạn cần nhập NoteAddButton và sử dụng nó trong thẻ:
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
Nếu bây giờ bạn quay lại trình duyệt, bạn sẽ tìm thấy phần tử đầu vào và một nút trên trang. Nhập nội dung nào đó vào trường nhập và nhấp vào Lưu. Ghi chú sẽ ngay lập tức xuất hiện trên trang và ở đó ngay cả sau khi làm mới trình duyệt.
Chia sẻ trạng thái giữa hai khung
Giả sử bạn muốn chia sẻ trạng thái giữa React và Solid.js. Điều đầu tiên bạn cần làm là thêm Solid vào dự án của mình bằng cách chạy lệnh sau:
npx astro add solid
Sau đó thêm Nano Stores cho Solid.js bằng cách chạy:
npm i nanostores @nanostores/solid
Để tạo giao diện người dùng trong Solid.js, hãy đi tới thư mục src/comComponents và tạo một tệp mới có tên Notes.js. Mở tệp và tạo thành phần Ghi chú trong đó:
import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"export default function Notes() {
const $notes = useStore(notes)
return(
<>
<h1>My notes</h1>
<ul>
<For each={notes()} />
{(note) => <li>{note}</li>}
</For>
</ul>
</>
)
}
Trong tệp này, bạn nhập ghi chú từ cửa hàng, xem từng ghi chú và hiển thị chúng trên trang.
Để hiển thị thành phần trên Note được tạo bằng Solid.js, chỉ cần truy cập Pages/index.astro, nhập NoteAddButton và sử dụng nó trong thẻ:
import NodeAddButton from "../components/NoteAddButton.jsx"
import Nodes from "../components/Notes.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
Bây giờ hãy quay lại trình duyệt của bạn, nhập nội dung nào đó vào trường nhập và nhấp vào lưu. Ghi chú sẽ xuất hiện trên trang và sẽ hiển thị giữa các lần hiển thị.
Các tính năng mới khác của Astro
Bằng cách sử dụng các kỹ thuật này, bạn có thể quản lý trạng thái của ứng dụng Astro và chia sẻ nó giữa các thành phần và khung. Nhưng Astro có nhiều tính năng hữu ích khác như thu thập dữ liệu, thu nhỏ HTML và hiển thị song song.
