From 0db1002a3bd7057ec398489fb97c86ec2f51cea7 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pyapar@gmail.com>
Date: Mon, 22 Nov 2021 23:50:17 +0100
Subject: [PATCH] chore: update cookie example

---
 examples/use-cookie/app.vue | 43 +++++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/examples/use-cookie/app.vue b/examples/use-cookie/app.vue
index 7cbe0e6f98..b0a57cf2b8 100644
--- a/examples/use-cookie/app.vue
+++ b/examples/use-cookie/app.vue
@@ -1,23 +1,30 @@
+<script setup>
+const user = useCookie('user')
+const logins = useCookie('logins')
+
+const login = () => {
+  logins.value = (logins.value || 0) + 1
+  user.value = { name: 'CookieLover.' + new Date().getMilliseconds() }
+}
+
+const logout = () => {
+  user.value = null
+}
+</script>
+
 <template>
-  <div>
-    <h1> Counter: {{ counter || '-' }}</h1>
-    <button @click="counter = null">
-      reset
+  <div v-if="user">
+    <h1>Welcome {{ user.name }}</h1>
+    <button @click="logout">
+      logout
     </button>
-    <button @click="counter--">
-      -
-    </button>
-    <button @click="counter++">
-      +
+    <hr>
+    You have logged in {{ logins }} times!
+  </div>
+  <div v-else>
+    Click here to login:
+    <button @click="login">
+      Login
     </button>
   </div>
 </template>
-
-<script setup>
-const counter = useCookie('counter')
-counter.value = counter.value || Math.round(Math.random() * 1000)
-</script>
-
-<style  scoped>
-button { margin: 10px 5px; }
-</style>