Vue Academy · Pelajaran

Mutations dan Actions

Ubah state dengan mutations dan actions asinkron.

Mutations dan Actions adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Mengubah Status dengan Aman

Dalam Vuex, Anda tidak pernah mengubah status secara langsung dari komponen. Sebagai gantinya, semua perubahan dilakukan melalui mutasi. Jalur tunggal yang eksplisit ini membuat setiap perubahan status dapat dilacak dan diperiksa kesalahannya di Vue DevTools.

Apa Itu Mutasi

Mutasi adalah fungsi sinkron yang menerima status saat ini dan mengubahnya. Mutasi adalah satu-satunya tempat yang mengizinkan status diubah.

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

Mutasi Harus Bersifat Sinkron

Mutasi harus dijalankan secara sinkron. Jika Anda menempatkan kode asinkron, seperti panggilan jaringan, di dalam mutasi, DevTools tidak dapat melacak kapan status sebenarnya berubah sehingga proses penelusuran waktu menjadi rusak.

Melakukan Commit Mutasi

Untuk menjalankan mutasi, Anda melakukan commit berdasarkan namanya dari komponen menggunakan this.$store.commit.

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

Meneruskan Muatan

Mutasi menerima argumen tambahan yang disebut muatan, sehingga Anda dapat meneruskan data ke dalam perubahan tersebut.

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

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

Muatan Bergaya Objek

Untuk beberapa nilai, berikan muatan berupa objek. Cara ini lebih jelas dan fleksibel daripada argumen berdasarkan posisi.

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

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

Apa Itu Tindakan?

Tindakan menangani pekerjaan asinkron dan logika bisnis. Tindakan tidak mengubah status secara langsung; sebaliknya, tindakan menjalankan mutasi. Dengan begitu, kode asinkron tetap terpisah dari perubahan status yang sebenarnya.

Mendefinisikan Tindakan

Tindakan menerima objek konteks. Dari objek ini, Anda dapat menjalankan mutasi dengan commit atau mengakses status.

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

Membongkar Konstruksi Konteks

Anda biasanya membongkar commit langsung dari konteks agar penulisannya lebih ringkas.

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

Mengirimkan Tindakan

Komponen memicu tindakan dengan this.$store.dispatch dan dapat menyertakan data opsional. Pengiriman ini mengembalikan janji untuk tindakan asinkron.

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

Alur Lengkap

Siklus lengkapnya adalah: komponen mengirimkan tindakan, tindakan menjalankan pekerjaan asinkron lalu menjalankan mutasi, dan mutasi mengubah status. Setelah itu, status reaktif memperbarui antarmuka secara otomatis.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang mutasi dan tindakan.

Ringkasan

Status hanya berubah melalui mutasi, yang berjalan secara sinkron dan dijalankan dengan commit. Logika asinkron berada dalam tindakan yang dikirimkan dengan dispatch dan menjalankan mutasi setelah siap. Keduanya menerima data untuk meneruskan informasi. Selanjutnya, Anda akan menambahkan pengambil dan membagi penyimpanan menjadi beberapa modul.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mutations dan Actions” gratis?

Ya — teks lengkap “Mutations dan Actions” 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 “Mutations dan Actions”?

Ubah state dengan mutations dan actions asinkron. 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 2 dari 3.

Berapa lama pelajaran “Mutations dan Actions” 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