Menu
Hacker Room
Informasi
Lifestyle
WebDev
vue

Global Store di Vue 3

Download template Vue terlebih dahulu dengan perintah:

degit mzaini30/vue latihan-store-vue

Kemudian, masuk ke folder itu dan install dependencies.

Sekarang, untuk melist store, kita edit di src/App.vue:

<template>
	<router-view></router-view>
	<ReloadPrompt/>
</template>

<script setup>
	import ReloadPrompt from './ReloadPrompt.vue'
	provide('counter', ref(0))
</script>

Di situ, aku provide counter dengan nilai ref 0.

Lalu, misalnya kita ingin menggunakan store tersebut, kita buat src/pages/index.vue berisi:

<script setup="">
	document.title = 'Latihan Vue'
	const counter = inject('counter')
	import TambahCounter from './TambahCounter.vue'
</script>

<template>
	<p>{{counter}}</p>
	<tambah-counter></tambah-counter>
</template>

Lalu, di src/pages/TambahCounter.vue:

<script setup="">
	const counter = inject('counter')
</script>

<template>
	<button @click='counter++'>Tambah</button>
	<button @click='counter--'>Kurangi</button>
</template>

Hasilnya:

Random Articles

Cara Supaya Vue Auto Routing Seperti Nuxt

Disclaimer for Catatan Zen

Menyesuaikan Hasil SvelteKit untuk assets Android Studio

Sejak Kapan Sebaiknya Anak Diajarkan Ilmu Agama?

Yuk Berkenalan dengan Bahasa Pemrograman Lua

Cari