Sådan administrerer du tilstand i Astro-applikationer

Når du bygger en applikation med Astro-rammeværket, undrer du dig måske over, hvordan du administrerer applikationstilstanden eller deler den mellem komponenter og rammer. Nano Stores er en af ​​de bedste statschefer for Astro, takket være det faktum, at det fungerer med React, Preact, Svelte, Solid, Lit, Angular og Vanilla JS.

Lær, hvordan du administrerer staten i et Astro-projekt. Følg enkle trin for at oprette en grundlæggende note-applikation, der bruger Nano Stores til tilstandsstyring og deler sin tilstand mellem en React- og Solid.js-komponent.

Hvad er Astro?

Astro-rammen giver dig mulighed for at oprette webapplikationer oven på populære UI-frameworks som React, Preact, Vue eller Svelte. Rammen bruger en komponent-baseret arkitektur, så hver side i Astro består af flere komponenter.

For at fremskynde sideindlæsningstiden minimerer frameworket brugen af ​​JavaScript på klientsiden og prærenderer sider på serveren i stedet.

Astro blev designet til at være det ideelle værktøj til at publicere indholdsfokuserede websteder. Tænk på blogs, landingssider, nyhedswebsteder og andre sider, der fokuserer på indhold frem for interaktivitet. For de komponenter, du markerer som interaktive, sender frameworket kun det minimale JavaScript, der er nødvendigt for at aktivere denne interaktivitet.

Installation og opsætning

Hvis du allerede har et Astro-projekt i gang, så spring dette afsnit over.

  Ret Google Play Butik fejlkode 403

Men hvis du ikke har et Astro-projekt, skal du oprette et. Det eneste krav til dette er at have Node.js installeret på din lokale udviklingsmaskine.

For at oprette et helt nyt Astro-projekt skal du starte din kommandoprompt, cd ind i den mappe, du vil oprette dit projekt i, og kør derefter følgende kommando:

 npm create astro@latest

Svar “y” for at installere Astro og angiv et navn til dit projekts mappenavn. Du kan henvise til Astro’s officielle opsætningsvejledning hvis du sidder fast undervejs.

Når du er færdig med at oprette projektet, følg det op med følgende kommando (dette tilføjer React til projektet):

 npx astro add react

Til sidst skal du installere Nano Stores for React ved at køre følgende kommando:

 npm i nanostores @nanostores/react

Stadig på din terminal, cd ind i projektets rodmappe og start programmet med en af ​​følgende kommandoer (afhængigt af hvilken af ​​dem du bruger):

 npm run dev 

Eller:

 yarn run dev 

Eller:

 pnpm run dev 

Gå til http://localhost:3000 i din webbrowser for at se en forhåndsvisning af dit websted.

Med hele dit Astro-projekt opsat, er næste trin at oprette en butik for applikationsdataene.

Oprettelse af Note Store

Opret en fil med navnet noteStore.js-filen inde i /src-mappen i dit programs rod. Inde i denne fil skal du bruge atom()-funktionen fra nanostores til at oprette et notelager:

 import { atom } from "nanostores"

export const notes = atom([])

export function addNote(note) {
  notes.set([...notes.get(), note])
  console.log("Added note: ", note.get())
}

Funktionen addNote() tager en note ind som sit argument og gemmer den inde i notelageret. Den bruger spredningsoperatoren, når sedlen opbevares for at undgå datamutation. Spredningsoperatoren er en JavaScript-stenografi til kopiering af objekter.

  Ret en fejl, der opstod under start af Roblox

Oprettelse af Note-Taking-appens brugergrænseflade

Brugergrænsefladen vil blot bestå af et input til at indsamle noten og en knap, der, når der klikkes på den, tilføjer noten til butikken.

Inde i src/components-mappen skal du oprette en ny fil med navnet NoteAddButton.jsx. Indsæt derefter følgende kode i filen:

 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>
    </>
  )
}

Denne kode tilføjer noten til komponentens tilstand, mens du skriver ind i inputtet. Derefter, når du klikker på knappen, gemmer den noten i butikken. Den griber også noterne fra butikken og viser dem i en uordnet liste. Med denne tilgang vil noten dukke op på siden umiddelbart efter at have klikket på knappen Gem.

Nu i din pages/index.astro-fil, skal du importere NoteAddButton og bruge den i

-tags:

 import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
  <main>
    <NoteAddButton client:load />
  </main>
</Layout>

Hvis du nu går tilbage til din browser, vil du finde input-elementet og knappen gengivet på siden. Indtast noget i inputtet, og klik på knappen Gem. Notatet vises med det samme på siden og forbliver på siden, selv efter du har opdateret din browser.

  Sådan styrer du din Xbox One med Google Assistant

Delingstilstand mellem to rammer

Lad os sige, at du vil dele tilstanden mellem React og Solid.js. Den første ting du skal gøre er at tilføje Solid til dit projekt ved at køre følgende kommando:

 npx astro add solid

Tilføj derefter Nano Stores til solid.js ved at køre:

 npm i nanostores @nanostores/solid

For at oprette brugergrænsefladen i solid.js skal du gå ind i src/components-mappen og oprette en ny fil med navnet Notes.js. Åbn filen og opret Notes-komponenten inde i den:

 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>
    </>
  )
}

I denne fil importerer du noterne fra butikken, går gennem hver af noterne og viser dem på siden.

For at vise ovenstående Note-komponent, der er oprettet med Solid.js, skal du blot gå til din pages/index.astro-fil, importere NoteAddButton og bruge den i

-tags:

 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>

Gå nu tilbage til din browser, skriv noget i inputtet, og klik på knappen Gem. Noten vises på siden og fortsætter også mellem gengivelserne.

Andre nye funktioner i Astro

Ved at bruge disse teknikker kan du administrere tilstanden i din Astro-applikation og dele den mellem komponenter og rammer. Men Astro har mange andre praktiske funktioner såsom dataindsamling, HTML-minificering og paralleliseret gengivelse.