Vue Academy · Pelajaran

Dasar-Dasar Vuex

Pahami store Vuex dan state terpusat.

Dasar-Dasar Vuex adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Mengapa Status Terpusat

Saat app Vue berkembang, berbagi data di antara banyak komponen menjadi sulit. Meneruskan props ke bawah dan memancarkan peristiwa ke atas melalui struktur bertingkat yang dalam mudah menimbulkan masalah. Vuex mengatasinya dengan satu store terpusat yang dapat dibaca dan ditulisi oleh komponen mana pun secara terprediksi.

Satu Sumber Kebenaran

Vuex mengikuti alur data satu arah. Seluruh status app yang dibagikan berada di satu tempat yang disebut store. Komponen membaca status dari store dan meminta perubahan melalui API yang dikendalikan, sehingga Anda selalu mengetahui asal data dan cara perubahannya.

Memasang Vuex

Vuex 4 adalah versi yang dibuat untuk Vue 3. Pasang dengan pengelola paket Anda, lalu buat dan daftarkan store dengan app Anda.

npm install vuex@4

Membuat Store

Gunakan createStore untuk mendefinisikan store. Opsi status adalah fungsi yang mengembalikan objek status reaktif awal.

import { createStore } from "vuex"

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

Mendaftarkan Store

Berikan store ke app Anda dengan app.use(store). Dengan begitu, store tersedia bagi setiap komponen melalui 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")

Properti Status

Objek state menyimpan data app Anda. Objek ini reaktif: ketika status berubah, komponen mana pun yang menggunakannya akan dirender ulang secara otomatis. Anggaplah objek ini sebagai data() untuk seluruh app Anda.

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

Mengakses Status dalam API Options

Di dalam komponen, Anda mengakses store melalui this.$store.state. Properti terhitung menjaga agar nilainya tetap reaktif.

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

Menggunakan Status dalam Templat

Setelah ditampilkan melalui properti terhitung, status digunakan seperti nilai lokal lainnya dalam templat.

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

Pembantu mapState

Menulis banyak properti terhitung secara manual akan berulang. Pembantu mapState membuatkannya untuk Anda dari sebuah larik nama status.

import { mapState } from "vuex"

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

mapState dengan Penamaan Ulang

Berikan objek ke mapState untuk mengganti nama properti atau menghitung nilai turunan dari status.

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

Mengakses Status dalam API Composition

Dengan API Composition, panggil useStore() di dalam setup untuk mendapatkan instans store, lalu baca status melalui properti terhitung.

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

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

Uji Cepat

Uji pemahaman Anda tentang dasar-dasar Vuex.

Ringkasan

Vuex menyediakan store terpusat dan reaktif sebagai satu sumber kebenaran. Anda membuatnya dengan createStore, mendaftarkannya melalui app.use, lalu membaca state melalui properti terhitung atau pembantu mapState. Dalam API Composition, Anda mengakses store dengan useStore(). Selanjutnya, Anda akan mempelajari cara mengubah status tersebut dengan aman.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar Vuex” gratis?

Ya — teks lengkap “Dasar-Dasar Vuex” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar Vuex”?

Pahami store Vuex dan state terpusat. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Dasar-Dasar Vuex” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy