Home-theater-designers
Apabila membina aplikasi dengan rangka kerja Astro, anda mungkin tertanya-tanya cara mengurus keadaan aplikasi atau berkongsi antara komponen dan rangka kerja. Nano Stores ialah salah satu pengurus negeri terbaik untuk Astro, terima kasih kepada fakta bahawa ia berfungsi dengan React, Preact, Svelte, Solid, Lit, Angular dan Vanilla JS.
Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN
Ketahui cara mengurus negeri dalam projek Astro. Ikuti langkah mudah untuk mencipta aplikasi pengambilan nota asas yang menggunakan Nano Stores untuk pengurusan keadaan dan berkongsi keadaannya antara komponen React dan Solid.js.
Apa Itu Astro?
Rangka kerja Astro membolehkan anda membuat aplikasi web di atas rangka kerja UI yang popular seperti React, Preact, Vue atau Svelte. Rangka kerja menggunakan a seni bina berasaskan komponen , jadi setiap halaman dalam Astro terdiri daripada beberapa komponen.
laman web yang menarik untuk dilawati ketika bosan
Untuk mempercepatkan masa pemuatan halaman, rangka kerja meminimumkan penggunaan JavaScript sisi klien dan sebaliknya memaparkan halaman pada pelayan.
Astro telah direka bentuk untuk menjadi alat yang ideal untuk menerbitkan laman web berfokuskan kandungan. Fikirkan blog, halaman pendaratan, tapak web berita dan halaman lain yang memfokuskan pada kandungan berbanding interaktiviti. Untuk komponen yang anda tandai sebagai interaktif, rangka kerja hanya akan menghantar JavaScript minimum yang diperlukan untuk mendayakan interaktiviti tersebut.
Pemasangan dan Persediaan
Jika anda sudah mempunyai projek Astro yang sedang berjalan, langkau bahagian ini.
Tetapi jika anda tidak mempunyai projek Astro, anda perlu menciptanya. Satu-satunya keperluan untuk ini ialah mempunyai Node.js dipasang pada mesin pembangunan tempatan anda.
Untuk mencipta projek Astro yang serba baharu, lancarkan gesaan arahan anda, cd ke dalam direktori anda ingin membuat projek anda, kemudian jalankan arahan berikut:
npm create astro@latest
Balas 'y' untuk memasang Astro dan berikan nama untuk nama folder projek anda. Boleh rujuk Astro tutorial persediaan rasmi jika anda terperangkap di sepanjang jalan.
Sebaik sahaja anda selesai membuat projek, ikutinya dengan arahan berikut (ini menambah React pada projek):
npx astro add react
Akhir sekali, pasang Nano Stores for React dengan menjalankan arahan berikut:
npm i nanostores @nanostores/react
Masih pada terminal anda, cd ke dalam folder akar projek dan mulakan aplikasi dengan mana-mana arahan berikut (bergantung pada arahan yang anda gunakan):
bagaimana membetulkan cd yang melangkau
npm run dev
Atau:
yarn run dev
Atau:
pnpm run dev
Pergi ke http://localhost:3000 dalam pelayar web anda untuk melihat pratonton tapak web anda.
Dengan projek Astro anda sudah siap, langkah seterusnya ialah membuat stor untuk data aplikasi.
Mencipta Kedai Nota
Buat fail bernama noteStore.js fail di dalam /src direktori dalam akar aplikasi anda. Di dalam fail ini, gunakan atom() fungsi daripada kedai nano untuk membuat kedai nota:
import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
The Tambah Nota() fungsi mengambil nota sebagai hujahnya dan menyimpannya di dalam stor nota. Ia menggunakan operator spread semasa menyimpan nota untuk mengelakkan mutasi data. Operator spread ialah a ringkasan JavaScript untuk menyalin objek.
Mencipta UI Apl Mencatat Nota
UI hanya akan terdiri daripada input untuk mengumpul nota dan butang yang, apabila diklik, menambah nota ke kedai.
Di dalam src/komponen direktori, buat fail baharu bernama NoteAddButton.jsx . Seterusnya, tampal kod berikut di dalam fail:
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>
</>
)
}
Kod ini menambah nota kepada keadaan komponen semasa anda menaip masukan. Kemudian, apabila anda mengklik butang, ia menyimpan nota ke kedai. Ia juga mengambil nota dari kedai dan memaparkannya di dalam senarai tidak tersusun. Dengan pendekatan ini, nota akan dipaparkan pada halaman sejurus selepas mengklik Jimat butang.
Sekarang dalam anda pages/index.astro fail, anda perlu mengimport NotaTambahButton dan menggunakannya dalam
mengapa harga keinginan sangat rendah
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
// Other code
Jika anda kini kembali ke penyemak imbas anda, anda akan menemui elemen input dan butang yang dipaparkan pada halaman. Taip sesuatu ke dalam input dan klik butang Jimat butang. Nota itu akan muncul serta-merta pada halaman dan akan kekal pada halaman walaupun selepas anda memuat semula penyemak imbas anda.
Perkongsian Keadaan Antara Dua Rangka Kerja
Katakan anda ingin berkongsi keadaan antara React dan Solid.js. Perkara pertama yang perlu anda lakukan ialah menambah Solid pada projek anda dengan menjalankan arahan berikut:
npx astro add solid
Seterusnya, tambahkan Nano Stores untuk solid.js dengan menjalankan:
npm i nanostores @nanostores/solid
Untuk mencipta UI dalam solid.js, pergi ke dalam src/komponen direktori dan buat fail baharu bernama Notes.js. Buka fail dan buat komponen Nota di dalamnya:
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>
</>
)
}
Dalam fail ini, anda mengimport nota dari kedai, melingkari setiap nota dan memaparkannya pada halaman.
Untuk menunjukkan perkara di atas Catatan komponen yang dibuat dengan Solid.js, hanya pergi ke anda pages/index.astro fail, import NotaTambahButton dan menggunakannya dalam
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>
// Other code
Sekarang kembali ke penyemak imbas anda, taip sesuatu ke dalam input, dan klik butang Jimat butang. Nota itu akan dipaparkan pada halaman dan juga berterusan antara pemaparan.
Ciri Baharu Astro yang Lain
Menggunakan teknik ini, anda boleh mengurus keadaan dalam aplikasi Astro anda dan berkongsinya antara komponen dan rangka kerja. Tetapi Astro mempunyai banyak ciri berguna lain seperti pengumpulan data, pengurangan HTML dan pemaparan selari.