Vue Academy · Pelajaran

Menyusun Store dan Akses Lintas Store

Menggunakan satu store di dalam store lain, pola penyusunan store, serta menghindari dependensi sirkular.

Pelajaran 3 dari 413 langkah

Menyusun Store dan Akses Lintas Store adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. 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 4 pelajaran total.

Store Dapat Menggunakan Store Lain

Aplikasi nyata memiliki beberapa store yang saling membutuhkan. Store keranjang mungkin memerlukan store auth untuk mengetahui pengguna saat ini. Pinia mempermudah akses antar-store.

Memanggil Store di Dalam Tindakan

Di dalam tindakan, cukup panggil komposabel store lain. Karena tindakan berjalan setelah Pinia aktif, hal ini aman.

import { useAuthStore } from './auth'

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    checkout() {
      const auth = useAuthStore()
      if (!auth.isLoggedIn) return
      // proceed with auth.userId
    }
  }
})

Sintaks Store Penyiapan

Selain objek opsi, defineStore menerima fungsi penyiapan. Bentuknya seperti penyiapan komponen: deklarasikan referensi dan nilai terhitung, lalu kembalikan keduanya.

import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  return { count }
})

Status sebagai Referensi

Dalam store penyiapan, setiap referensi atau nilai reaktif yang Anda kembalikan menjadi status. Gunakan referensi untuk nilai primitif dan nilai reaktif untuk objek.

export const useUserStore = defineStore('user', () => {
  const name = ref('Coddy')
  const profile = reactive({ age: 30 })
  return { name, profile }
})

Pengambil sebagai Nilai Terhitung

Nilai computed yang dikembalikan berfungsi sebagai pengambil. Nilai ini disimpan sementara dan reaktif, seperti pengambil pada store opsi.

export const useCounterStore = defineStore('counter', () => {
  const count = ref(2)
  const doubled = computed(() => count.value * 2)
  return { count, doubled }
})

Tindakan sebagai Fungsi

Fungsi yang dikembalikan adalah sebuah tindakan. Fungsi ini dapat membaca dan menulis referensi secara langsung menggunakan .value.

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
})

Mengembalikan Referensi dan Nilai Terhitung

Aturan utama untuk store penyiapan: kembalikan semua yang ingin Anda tampilkan. Apa pun yang tidak dikembalikan tetap bersifat pribadi bagi store.

export const useStore = defineStore('s', () => {
  const visible = ref(0)
  const secret = ref('hidden') // not returned -> private
  return { visible }
})

Lintas-Store dalam Store Penyiapan

Dalam store penyiapan, Anda dapat memanggil store lain di tingkat teratas dan menggunakannya dalam nilai terhitung atau tindakan.

export const useCartStore = defineStore('cart', () => {
  const auth = useAuthStore()
  const canCheckout = computed(() => auth.isLoggedIn)
  return { canCheckout }
})

Menghindari Dependensi Melingkar

Jika store A mengimpor store B dan B mengimpor A, Anda dapat mengalami dependensi melingkar. Hindari memanggil store lain di tingkat teratas modul; sebagai gantinya, panggil store tersebut di dalam tindakan atau pengambil saat diperlukan.

// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
  doWork() {
    const other = useOtherStore() // resolved at call time
  }
}

Mengapa Pemanggilan Tertunda Membantu

Memanggil komposabel store di dalam fungsi menunda penyelesaian hingga waktu proses, setelah semua modul dimuat. Ini memutus siklus impor yang menyebabkan kerusakan saat evaluasi modul.

Store Opsi Dibandingkan Store Penyiapan

Kedua gaya sama-sama kuat. Pilih store opsi untuk bentuk deklaratif yang familier; pilih store penyiapan ketika Anda menginginkan fleksibilitas penuh API Komposisi, seperti pengawas atau komposabel di dalam store.

Uji Cepat

Uji pemahaman Anda tentang penggabungan penyimpanan.

Jawab di pelajaran interaktif

Ringkasan

Anda telah mempelajari cara menggabungkan penyimpanan:

Panggil komposabel penyimpanan lain di dalam aksi untuk mengakses penyimpanan lain.
Penyimpanan berbasis setup menggunakan fungsi: ref menjadi status, computed menjadi pengambil, dan fungsi menjadi aksi.
Kembalikan semua hal yang ingin Anda buka untuk digunakan.
Panggil penyimpanan secara malas di dalam fungsi untuk menghindari dependensi melingkar.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyusun Store dan Akses Lintas Store” gratis?

Ya — teks lengkap “Menyusun Store dan Akses Lintas Store” 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 4 pelajaran total.

Apa yang akan aku pelajari di “Menyusun Store dan Akses Lintas Store”?

Menggunakan satu store di dalam store lain, pola penyusunan store, serta menghindari dependensi sirkular. 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 4.

Berapa lama pelajaran “Menyusun Store dan Akses Lintas Store” 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