Vue Academy · Pelajaran

Getters dan Modules

Hitung state turunan dan atur store ke dalam modules.

Getters dan Modules adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Status Terhitung dengan Pengambil

Terkadang Anda memerlukan status turunan, seperti daftar yang difilter atau jumlah item. Pengambil adalah padanan properti terhitung pada penyimpanan: pengambil menghasilkan nilai dari status dan menyimpan hasilnya hingga dependensinya berubah.

Mendefinisikan Pengambil

Pengambil adalah fungsi yang menerima status dan mengembalikan nilai turunan.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

Pengambil yang Menggunakan Pengambil Lain

Pengambil menerima argumen kedua yang berisi semua pengambil lainnya, sehingga Anda dapat menggabungkannya.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

Mengakses Pengambil

Baca pengambil melalui this.$store.getters dalam properti terhitung.

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

Pengambil Bergaya Metode

Kembalikan fungsi dari pengambil untuk meneruskan argumen. Perhatikan bahwa pengambil bergaya metode tidak disimpan dalam tembolok dan dijalankan setiap kali dipanggil.

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

Pembantu mapGetters

Seperti mapState, pembantu mapGetters secara otomatis mengubah pengambil menjadi properti terhitung.

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

Mengapa Membaginya Menjadi Modul?

Penyimpanan tunggal yang besar menjadi sulit dipelihara. Vuex memungkinkan Anda membagi penyimpanan menjadi modul, masing-masing dengan status, mutasi, tindakan, dan pengambilnya sendiri, sehingga logika yang berkaitan tetap bersama.

Mendefinisikan Modul

Modul hanyalah objek dengan opsi yang sama seperti penyimpanan. Anda mendaftarkan modul di bawah kunci modules.

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

Mendaftarkan Modul

Gabungkan modul dalam penyimpanan akar di bawah modules. Setiap kunci menjadi nama modul.

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

Memberi Ruang Nama pada Modul

Atur namespaced: true agar modul memiliki cakupannya sendiri. Dengan demikian, konflik nama antarmodul dapat dihindari dan strukturnya menjadi jelas.

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

Mengakses Modul dengan Ruang Nama

Dengan ruang nama, tambahkan nama modul sebagai awalan saat menjalankan mutasi, mengirimkan tindakan, atau membaca pengambil.

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

Pemeriksaan Singkat

Uji pengetahuan Anda tentang pengambil dan modul.

Ringkasan

Pengambil menghasilkan nilai tersimpan dari status dan diakses melalui this.$store.getters atau mapGetters. Modul membagi penyimpanan besar menjadi unit-unit terfokus; pengaturan namespaced: true memberikan cakupan sehingga Anda mengakses anggotanya dengan awalan module/name. Kini Anda memiliki seluruh perangkat Vuex: status, mutasi, tindakan, pengambil, dan modul.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Getters dan Modules” gratis?

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

Hitung state turunan dan atur store ke dalam modules. 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 3 dari 3.

Berapa lama pelajaran “Getters dan Modules” 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