0Pricing
Vue Academy · Lezione

defineStore: stato, getter, action

Store Options vs store Setup, stato come funzione, getter computed, action asincrone.

defineStore: stato, getter, action è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

I tre pilastri di uno store

Un option store ha tre parti: state (i dati), getters (i valori derivati) e actions (i metodi che modificano lo stato). Definisca tutte e tre all'interno di defineStore.

Definire uno store

defineStore accetta una stringa id univoca e un oggetto di opzioni. Restituisce un composable, convenzionalmente denominato useXxxStore.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

Lo state è una funzione

L'opzione state deve essere una funzione che restituisce un oggetto. In questo modo ogni istanza dello store riceve uno state nuovo, proprio come data() nei componenti.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

Leggere lo state

Chiami il composable dello store all'interno di setup per ottenere un'istanza, quindi legga direttamente le proprietà dello state. Sono reattive.

const counter = useCounterStore()
console.log(counter.count) // 0

I getter sono valori calcolati

I getters sono simili alle proprietà computed. Ognuno riceve state come primo argomento e restituisce un valore derivato. I risultati vengono memorizzati nella cache.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Usare un getter

Acceda a un getter come a una proprietà, senza parentesi. Pinia lo ricalcola solo quando cambiano le sue dipendenze.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Getter che fanno riferimento ad altri getter

Per usare un altro getter, faccia riferimento a this invece che al parametro state. Quando usa this, non utilizzi una arrow function.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Le actions modificano lo state

Le actions sono metodi. Usano this per leggere e modificare direttamente lo state. Non servono commit né dispatch: basta chiamare il metodo.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

Actions asincrone

Le actions possono essere async. Questo è il posto giusto per le chiamate API: recuperi i dati e poi assegni il risultato allo state.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Usare lo store in un componente

Importi il composable, lo chiami in <script setup> e usi state, getters e actions nel template.

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Applicare patch a più campi

Per modificare più campi dello state contemporaneamente, usi $patch. Raggruppa le modifiche in un'unica voce nei devtools.

counter.$patch({ count: 10, name: 'New' })

Verifica rapida

Verifichi la sua conoscenza della struttura di un option store.

Riepilogo

Un option store ha tre parti:

  • state: una funzione che restituisce l'oggetto dei dati.
  • getters: valori derivati memorizzati nella cache, che ricevono state (oppure usano this).
  • actions: metodi che modificano direttamente lo state tramite this.

Usi lo store chiamando il relativo composable all'interno di setup.

Domande Frequenti

La lezione «defineStore: stato, getter, action» è gratuita?

Sì — il testo completo di «defineStore: stato, getter, action» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «defineStore: stato, getter, action»?

Store Options vs store Setup, stato come funzione, getter computed, action asincrone. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «defineStore: stato, getter, action»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Pinia vs Vuex: perché effettuare il passaggio
  2. defineStore: stato, getter, action
  3. Composizione degli store e accesso tra store
  4. Persistenza e devtools di Pinia
← Torna a Vue Academy