Vue Academy · Lekcja

Mutacje i akcje

Zmienią Państwo stan za pomocą mutacji i asynchronicznych akcji.

Mutacje i akcje to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Bezpieczna zmiana stanu

W Vuex nie należy bezpośrednio modyfikować stanu z poziomu komponentu. Zamiast tego wszystkie zmiany przechodzą przez mutacje. Ta pojedyncza, jawna ścieżka sprawia, że każdą zmianę stanu można prześledzić i debugować w Vue DevTools.

Czym jest mutacja?

Mutacja to synchroniczna funkcja, która otrzymuje bieżący stan i go zmienia. Mutacje są jedynym miejscem, w którym można modyfikować stan.

mutations: {
  increment(state) {
    state.count++
  }
}

Mutacje muszą być synchroniczne

Mutacje muszą działać synchronicznie. Jeśli umieszczą Państwo kod asynchroniczny, taki jak wywołanie sieciowe, wewnątrz mutacji, DevTools nie będzie w stanie śledzić, kiedy stan faktycznie się zmienił, co uniemożliwi debugowanie z wykorzystaniem podróży w czasie.

Commitowanie mutacji

Aby uruchomić mutację, należy wykonać na niej commit po nazwie z poziomu komponentu, używając this.$store.commit.

methods: {
  add() {
    this.$store.commit("increment")
  }
}

Przekazywanie payloadu

Mutacje przyjmują dodatkowy argument nazywany payloadem, który pozwala przekazać dane do zmiany.

mutations: {
  incrementBy(state, amount) {
    state.count += amount
  }
}

// commit with payload
this.$store.commit("incrementBy", 5)

Payloady w postaci obiektów

W przypadku wielu wartości należy przekazać payload w postaci obiektu. Jest to czytelniejsze i bardziej elastyczne niż argumenty pozycyjne.

mutations: {
  setUser(state, payload) {
    state.user = { id: payload.id, name: payload.name }
  }
}

this.$store.commit("setUser", { id: 1, name: "Ada" })

Czym jest akcja?

Akcja obsługuje pracę asynchroniczną i logikę biznesową. Akcje same nie zmieniają stanu; zamiast tego zatwierdzają mutacje. Dzięki temu kod asynchroniczny pozostaje oddzielony od właściwej zmiany stanu.

Definiowanie akcji

Akcja otrzymuje obiekt kontekstu. Możesz za jego pomocą zatwierdzać mutacje przez commit lub uzyskiwać dostęp do stanu.

actions: {
  async fetchUser(context, userId) {
    const res = await fetch("/api/users/" + userId)
    const data = await res.json()
    context.commit("setUser", data)
  }
}

Destrukturyzacja kontekstu

Dla zwięzłości często destrukturyzuje się commit bezpośrednio z kontekstu.

actions: {
  async loadTodos({ commit }) {
    commit("setLoading", true)
    const res = await fetch("/api/todos")
    commit("setTodos", await res.json())
    commit("setLoading", false)
  }
}

Wysyłanie akcji

Komponenty wywołują akcje za pomocą this.$store.dispatch, przekazując opcjonalny payload. Wywołanie dispatch zwraca obietnicę w przypadku akcji asynchronicznych.

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

Pełny przepływ

Pełny cykl wygląda następująco: komponent wysyła akcję, akcja wykonuje pracę asynchroniczną i zatwierdza mutację, a mutacja zmienia stan. Reaktywny stan automatycznie aktualizuje wtedy interfejs użytkownika.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat mutacji i akcji.

Podsumowanie

Stan zmienia się wyłącznie za pośrednictwem mutacji, które są synchroniczne i zatwierdzane za pomocą commit. Logika asynchroniczna znajduje się w akcjach wysyłanych przez dispatch, które po zakończeniu zatwierdzają mutacje. Oba mechanizmy przyjmują payloady do przekazywania danych. Następnie dodasz gettery i podzielisz store na moduły.

Często zadawane pytania

Czy lekcja „Mutacje i akcje” jest bezpłatna?

Tak — pełny tekst „Mutacje i akcje” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Mutacje i akcje”?

Zmienią Państwo stan za pomocą mutacji i asynchronicznych akcji. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Mutacje i akcje”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy