Vue Academy · Lekcja

Podstawy Vuex

Poznają Państwo store Vuex i scentralizowany stan.

Podstawy Vuex to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 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.

Dlaczego scentralizowany stan?

Wraz z rozwojem aplikacji Vue udostępnianie danych między wieloma komponentami staje się uciążliwe. Przekazywanie propsów w dół i emitowanie zdarzeń w górę przez głęboko zagnieżdżone drzewa komponentów jest podatne na błędy. Vuex rozwiązuje ten problem za pomocą jednego, scentralizowanego store, z którego każdy komponent może odczytywać dane i do którego może je zapisywać w przewidywalny sposób.

Jedno źródło prawdy

Vuex wykorzystuje jednokierunkowy przepływ danych. Cały współdzielony stan aplikacji znajduje się w jednym miejscu nazywanym store. Komponenty odczytują stan ze store i żądają zmian za pośrednictwem kontrolowanego API, dzięki czemu zawsze wiadomo, skąd pochodzą dane i jak się zmieniają.

Instalowanie Vuex

Vuex 4 to wersja przeznaczona dla Vue 3. Należy zainstalować ją za pomocą menedżera pakietów, a następnie utworzyć store i zarejestrować go w aplikacji.

npm install vuex@4

Tworzenie store

Za pomocą createStore należy zdefiniować store. Opcja state jest funkcją zwracającą początkowy reaktywny obiekt stanu.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

Rejestrowanie store

Należy przekazać store do aplikacji za pomocą app.use(store). Dzięki temu jest on dostępny dla każdego komponentu przez this.$store.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

Właściwość state

Obiekt state przechowuje dane aplikacji. Jest reaktywny: gdy stan się zmieni, każdy korzystający z niego komponent zostanie automatycznie wyrenderowany ponownie. Można myśleć o nim jak o metodzie data() całej aplikacji.

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

Uzyskiwanie dostępu do stanu w Options API

W komponencie można uzyskać dostęp do store przez this.$store.state. Właściwość computed zachowuje reaktywność wartości.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

Używanie stanu w szablonie

Po udostępnieniu za pomocą właściwości computed stan jest używany w szablonie tak jak każda lokalna wartość.

<template>
  <p>Current count: {{ count }}</p>
</template>

Pomocnik mapState

Ręczne tworzenie wielu właściwości computed jest powtarzalne. Pomocnik mapState generuje je na podstawie tablicy nazw stanów.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

mapState ze zmianą nazw

Należy przekazać obiekt do mapState, aby zmienić nazwy właściwości lub obliczać wartości pochodne na podstawie stanu.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

Uzyskiwanie dostępu do stanu w Composition API

W Composition API należy wywołać useStore() wewnątrz setup, aby uzyskać instancję store, a następnie odczytywać stan za pomocą computed.

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat podstaw Vuex.

Podsumowanie

Vuex udostępnia scentralizowany, reaktywny store jako jedno źródło prawdy. Tworzy się go za pomocą createStore, rejestruje przez app.use, a stan state odczytuje za pomocą właściwości computed lub pomocnika mapState. W Composition API do store można uzyskać dostęp za pomocą useStore(). Następnie nauczą się Państwo bezpiecznie zmieniać ten stan.

Często zadawane pytania

Czy lekcja „Podstawy Vuex” jest bezpłatna?

Tak — pełny tekst „Podstawy Vuex” 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 „Podstawy Vuex”?

Poznają Państwo store Vuex i scentralizowany stan. Ć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 1 z 3.

Ile czasu zajmuje lekcja „Podstawy Vuex”?

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