Keadaan Kongsi Svelte antara komponen (untuk boneka)

Sebaik sahaja anda melihat $state baharu dalam Svelte 5, anda mungkin tergoda untuk melakukan perkara berikut:

// sharedState.svelte.js
export const searchState = $state(""); // This won't work!

<!-- App.svelte -->
<script>
import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // This won't work!
    searchState = "bicycles";
}
</script

<button onclick={handleClick}>Search for bicycles</button>

Ini tidak akan berfungsi - dan inilah sebabnya:

Anda menghadapi bahagian paling rumit dalam Svelte 5. Cara kereaktifan berfungsi dan cara pengkompil menyembunyikannya daripada anda.

Apabila anda mengeksport nilai tunggal seperti nombor atau rentetan, tiada mekanisme untuk Svelte mengekalkan kereaktifan kerana JavaScript tidak menawarkan cara untuk menjejakinya.

Terima kasih yang tidak terhingga kepada Mat Simon yang menerangkan perkara ini kepada saya dengan perkataan yang mudah ? Inilah yang saya pelajari:

Gunakan $state dengan objek dan tatasusunan, bukan rentetan!

Anda tidak boleh menggunakan rentetan secara langsung, tetapi semua objek (dan tatasusunan) dalam $state mendapatkan semua nilainya diproksi secara automatik oleh Svelte 5. Membungkus nilai rentetan anda ke dalam objek berfungsi:

// sharedState.svelte.js
// ❌ export const searchState = $state("");
export const searchState = $state({ text : "" });

Ini bertukar menjadi objek keadaan Svelte dengan pengambil dan penetap untuk .text. Anda boleh memilih mana-mana nama harta yang anda inginkan, serta berbilang sifat.

Apabila anda mengimport objek $state ini dan kemudian tulis .text =, anda menggunakan penetap Svelte untuk mengemas kini keadaan:

// App.svelte

import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // uses the automatically created setter
    searchState.text = "bicycles";
}

<button onclick={handleClick}>Search for bicycles</button>

Demo Mudah (REPL)): Kongsi $state antara komponen (mudah)

Dan Svelte benar-benar bijak tentang cara memproksi objek ini. Itulah sebabnya: myList.push('foo') juga berfungsi untuk Tatasusunan, kerana Svelte juga memproksi kaedah tolak.

// data.svelte.js
export const myList = $state([]);

Berhati-hati: Jangan tetapkan semula objek / tatasusunan secara langsung!

Apabila anda menggunakan objek (termasuk tatasusunan) ia juga bukan keadaan sendiri! Itu penting untuk difahami.

Jika anda melakukan ini, anda hilang kereaktifan!

import { searchState } from './sharedState.svelte.js';
searchState = {text: "Hello world!"}; // don't do this!

Tiada cara untuk Svelte mengendalikan perkara ini untuk anda. Sentiasa gunakan pengambil/penyetel Svelte automatik melalui searchState.text = 'nilai baharu'.

Lanjutan: Gunakan SvelteSet, SvelteMap, SvelteDate, dsb.

Baiklah, objek dan tatasusunan baik dan dikendalikan oleh Svelte secara automatik - kami mendapatnya.

Tetapi bagaimana dengan
Tarikh, URL dan lebih banyak objek terbina dalam JavaScript standard? Dan jika anda lebih berpengalaman dalam JavaScript, anda mungkin tahu bahawa terdapat beberapa jenis data yang lebih maju (objek terbina dalam standard):

• Objek Set membolehkan anda menyimpan nilai unik dari sebarang jenis, sama ada nilai primitif atau rujukan objek.

• Objek Peta memegang pasangan nilai kunci dan mengingati susunan sisipan asal kekunci.

Jika anda ingin menggunakan ini dengan $state reaktif, anda perlu menggunakan pembalut Svelte yang sepadan daripada svelte/reactivity

• MediaQuery
• SvelteDate
• SvelteMap
• SvelteSet
• SvelteURL
• SvelteURLSearchParams

// sharedState.svelte.js
export const searchState = $state(""); // This won't work!

Sebab terdapat kelas SvelteSet dan SvelteMap yang berasingan (bukan hanya menulis semula secara automatik seperti yang mereka lakukan dengan objek dan tatasusunan) adalah kerana mereka ingin melukis garis di suatu tempat kerana mereka tidak boleh memproksi setiap objek yang boleh difikirkan. Lihat https://github.com/sveltejs/svelte/issues/10263 untuk butiran teknikal.

Lanjutan: Gunakan kelas

Terdapat berbilang pilihan untuk menentukan objek keadaan anda, anda juga boleh menggunakan kelas untuk kaedah tersuai: https://joyofcode.xyz/how-to-share-state-in-svelte-5#using-classes-for- keadaan reaktif

Kongsi keadaan antara komponen ($state & $derived)

Jadi kita tahu cara mengimport (dan mengemas kini) keadaan di dalam komponen dan kita tahu bahawa kita boleh menggunakan objek dan tatasusunan di luar kotak dengan $state:

<!-- App.svelte -->
<script>
import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // This won't work!
    searchState = "bicycles";
}
</script

<button onclick={handleClick}>Search for bicycles</button>

Kita juga boleh menurunkan objek $state sebagai rujukan oleh harta dengan $props:

// sharedState.svelte.js
// ❌ export const searchState = $state("");
export const searchState = $state({ text : "" });

// App.svelte

import { searchState } from './sharedState.svelte.js'

function handleClick(){
    // uses the automatically created setter
    searchState.text = "bicycles";
}

<button onclick={handleClick}>Search for bicycles</button>

Tetapi bagaimana anda tahu bahawa keadaan berubah di suatu tempat dalam apl anda apabila anda berada di dalam komponen? Itulah yang $derived dan $derived.by adalah untuk:

// data.svelte.js
export const myList = $state([]);

Demo Mudah (REPL)): Kongsi $state antara komponen (mudah)

Penggunaan dengan bind:value

Seperti yang anda mungkin sedia maklum, tidak perlu menulis fungsi pengendali untuk input teks. Anda hanya boleh menggunakan bind:value={myStateObj} untuk mengemas kini keadaan secara automatik:

import { searchState } from './sharedState.svelte.js';
searchState = {text: "Hello world!"}; // don't do this!

Penggunaan dengan bind:group?

Berbilang input kotak pilihan boleh dikendalikan dengan Svelte juga melalui bind-group={stateObj} - tetapi masih terdapat perbincangan terbuka tentang cara menggunakannya dengan betul dengan $state.

Berita baik: Terdapat pelbagai cara untuk melakukan ini, lihat di bawah.

Demo lanjutan: Cari dan tapis data produk

Salah satu cara ialah menggunakan acara onchange dan kemas kini keadaan dalam fungsi pengendali.

Demo Mudah (REPL): Cari dan tapis dengan komponen kumpulan kotak semak dan v5 $state & $derived

Contoh SvelteKit penuh (WIP): https://github.com/mandrasch/austrian-web-dev-companies

Saya juga memulakan perbincangan Reddit untuk mendapatkan lebih banyak maklum balas:
Apakah cara paling mudah untuk kotak semak carian & penapis dengan Svelte v5 ($state)?

Senang mendapat maklum balas anda di sana - atau di sini sebagai ulasan! ?

Lebih banyak sumber

• Cara Berbeza Untuk Berkongsi Keadaan Dalam Svelte 5 - Joy of Code
• Mari Bina Sistem Penapisan dengan Svelte 5 , Sveltekit 2, Tailwind, Upstash (2024) - Lawal Adebola
• Svelte 5 - Global $state (tukar kedai kepada $state rune) - Svelte Mastery

Terima kasih yang tidak terhingga kepada Mat Simon!

Atas ialah kandungan terperinci Keadaan Kongsi Svelte antara komponen (untuk boneka). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!