Menangani Global State Manajemen Di Nuxt3
Developers biasanya mengikuti prinsip untuk tidak mengekspos states di area yang tidak diperlukan. Untuk menjaga prinsip ini tetap utuh, kami melokalkan state ke file individual. Sementara sebagian besar waktu, tidak apa-apa untuk melakukannya, dalam beberapa kasus, kita harus mempertimbangkan untuk membuat beberapa global states.
Global states adalah data yang terpapar di seluruh aplikasi. Sekarang pertimbangkan untuk membuat situs web dengan Otentikasi Pengguna dan Dark Mode. Setiap halaman di situs web ini perlu mengetahui pengguna mana yang saat ini masuk dan di tema mana situs harus dirender. Melokalisasi data ini pada akhirnya dapat menyebabkan bug saat proyek berkembang yang juga akan sulit untuk di-debug.
Masalah menggunakan state Lokal
Melewati data dari parent ke children
Di sini kita dapat melihat bahwa melewatkan data yang sama dari komponen tingkat atas ke komponen tingkat bawah tidak efisien. Untuk memfasilitasi debugging dan meningkatkan keterbacaan kode, Anda harus mempertahankan satu sumber kebenaran.
Solusi menggunakan global states
Menetapkan satu sumber kebenaran di Global State
Saat aplikasi pertama kali diluncurkan, data dimuat ke Global states dan diimpor oleh semua komponen yang membutuhkan data tersebut.
Nuxt3 Dapat Disusun
Nuxt3 menggunakan komposisi untuk mempermudah tugas ini. Komposisi digunakan untuk memanfaatkan API komposisi Vue3 untuk menggunakan kembali logika stateful. Pertama, buat direktori composables/ dalam paket root aplikasi Anda. Di dalamnya Anda dapat membuat dua file TypeScript: useUserData.ts dan useDarkTheme.ts.
Untuk memulai dengan membuat fungsi yang dapat dikomposisi, kita perlu mendefinisikan fungsi yang mengembalikan objek dengan state, dan fungsi yang memodifikasinya.
import IUser from '@/types'
const useUserData = () => {
const userData = useState<IUser>('user', () => {})
const setUserData = (user: IUser) => {
userData.value = user
} return {
userData,
setUserData
}
}export default useUserData
Tentukan antarmuka TS dengan properti yang dimiliki objek Anda dan berikan ke useState untuk mendapatkan tipenya. <script setup /> dapat menggunakan metode ini untuk mengubah state aplikasi.
<script setup lang="ts">
import IUser from '@/types'
const { userData, setUserData } = useUserData()const { data: user, error } = useAsyncData('user', async () => {
const response = (await $fetch('/api/user')) as IUser
setUserData(response)
})
</script>[...]
Demikian pula, Anda dapat menggunakan UserData di file apa pun dan mengakses data.
Kesimpulan
Jika Anda perlu membuat data Anda dapat diakses dari mana saja, gunakan Nuxt3 yang dapat dikomposisi untuk membuat Global states dan gunakan kembali satu sumber kebenaran ini sehingga situs web Anda berperilaku sesuai. Saya bisa melakukannya.
Terima kasih telah membaca!