Updated code

Author: lautiamkok

1.nuxt/1.essentials/5.fetch-data-handle-errors/pages/blog/[id].vue

@@ -14,6 +14,7 @@ const runtimeConfig = useRuntimeConfig()
 const { data: post, error } = await useFetch(`/posts/${route.params.id}`, {
   baseURL: runtimeConfig.public['apiBaseUrl']
 })
+
 const failure = unref(error)
 if (failure !== null) {
   // Show a full screen error page on the `error.vue` page.

1.nuxt/1.essentials/6.state-management/package-lock.json

@@ -8,6 +8,6 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "^3.2.3"
+    "nuxt": "^3.4.1"
   }
 }

1.nuxt/1.essentials/6.state-management/package.json

@@ -1,41 +1,22 @@
 <template>
-  <p v-if="isServerPostEvent">
-    Well done! Resources are updated on the server side.
-  </p>
-  <div v-else>
-    <site-header />
-    <nav-main />
-    <NuxtPage />
-  </div>
+  <site-header />
+  <nav-main />
+  <NuxtPage />
 </template>
 
 <script setup>
-const nuxtApp = useNuxtApp()
-const runtimeConfig = useRuntimeConfig()
-const { items } = useCart()
+if (!import.meta.env.SSR) {
+  const runtimeConfig = useRuntimeConfig()
+  const cartId = runtimeConfig.public['appCartId']
+  const cookie = useCookie(cartId)
+  const { items } = useCart()
 
-const isServerPostEvent = ref(false)
-const requestMethods = ['PATCH', 'POST', 'PUT', 'DELETE']
-
-if (import.meta.env.SSR) {
-  // https://nuxt.com/docs/api/composables/use-request-event
-  const event = useRequestEvent()
-
-  const req = event.node.req
-  const url = event.node.req.url
-  const string = url.substring(url.indexOf('?'))
-  const params = new URLSearchParams(string)
-
-  if (requestMethods.includes(req.method)) {
-    isServerPostEvent.value = true
-  }
-
-  if (params.has('cart') && params.get('cart') === 'set') {
-    items.value = await normalizeBody(req)
+  // If cookie is gone, that means the data in Redis is gone too, so delete
+  // the cart in `localstorage` too.
+  if (!cookie.value) {
+    localStorage.removeItem(cartId)
   }
-} else {
-  const id = runtimeConfig.public['appCartId']
-  const cart = localStorage.getItem(id)
+  const cart = localStorage.getItem(cartId)
   items.value =  JSON.parse(cart) ?? []
 }
 </script>

1.nuxt/1.essentials/7.store-management/app.vue

@@ -0,0 +1,67 @@
+'use strict'
+
+export default (options) => {
+  function get (name, cookie) {
+    const resource = cookie ?? document.cookie
+    
+    let string = resource.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1]
+    if (string) {
+      string = decodeURIComponent(string)
+    }
+    if (string === 'undefined' 
+      || string === undefined 
+      || string === ''
+    ) {
+      string = null
+    }
+
+    return JSON.parse(string)
+  }
+
+  function set (name, value) {
+    let maxAge = 0
+    
+    // If options contains maxAge then we're configuring max-age.
+    if (options.maxAge) {
+      maxAge = options.maxAge
+    }
+
+    // If options contains days then we're configuring max-age.
+    if (options.days) {
+      maxAge = options.days * 60 * 60 * 24
+    }
+
+    // Finally, creating the key. Must set `path=/` in the cookie or Firefox
+    // won't remove the expired cookie automatically until the browser is
+    // closed.
+    document.cookie = `${name}=${encodeURIComponent(value)}; max-age=${maxAge}; path=/`
+  }
+
+  function drop (name) {
+    document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'
+  }
+
+  // observe, eye, spy, note, track, follow, guard, study, mark, monitor.
+  function observe (ref, name) {
+    // https://vuejs.org/api/reactivity-core.html#watch
+    watch(ref, (newVal, prevVal) => {
+      // Uncomment to see the result.
+      // console.log('newVal =', newVal)
+      // console.log('count.value =', count.value)
+
+      // Stringify the reactive object before storing.
+      set(name, JSON.stringify(ref.value))
+    }, {
+      // Force deep traversal of the source if it is an object, so that the
+      // callback fires on deep mutations.
+      deep: true
+    })
+  }
+
+  return {
+    get,
+    set,
+    drop,
+    observe
+  }
+}

1.nuxt/1.essentials/7.store-management/composables/use-cooki3.ts

@@ -0,0 +1,29 @@
+// https://nuxt.com/docs/guide/directory-structure/middleware
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  // console.log('global middleware from `/middleware/` that runs on every route change')
+  if (import.meta.env.SSR) {
+    const runtimeConfig = useRuntimeConfig()
+    const cartId = runtimeConfig.public['appCartId']
+    const { items } = useCart()
+
+    // Reset before populating.
+    items.value = []
+    
+    // Get the value of the cart from cookie and use it to set a key in Redis
+    // db.
+    // https://nuxt.com/docs/api/composables/use-request-event
+    // const event = useRequestEvent()
+    // const req = event.node.req
+    // const cookie = req.headers.cookie
+    const cookie = useCookie(cartId) || null
+    const key = cookie.value ? `${cartId}:${cookie.value}` : null
+    // console.log('cookie =', cookie.value)
+    // console.log('key =', key)
+
+    if (key) {
+      const { data } = await useFetch(`/api/carts/${key}`)
+      const cart = data.value ?? []
+      items.value = cart
+    }
+  }
+})

1.nuxt/1.essentials/7.store-management/middleware/reset-cart.global.ts

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.4.6",
-    "pinia": "^2.0.30"
+    "pinia": "^2.0.30",
+    "redis": "^4.6.6"
   }
 }

1.nuxt/1.essentials/7.store-management/package-lock.json

@@ -0,0 +1,19 @@
+'use strict'
+
+// https://redis.io/docs/clients/nodejs/
+import { createClient } from 'redis'
+
+export default eventHandler(async event => {
+  const id = event.context.params.id
+
+  // Stop right here if no id.
+  if (!id) {
+    return null
+  }
+
+  const client = createClient()
+  client.on('error', err => console.log('Redis Client Error', err))
+  await client.connect()
+
+  return JSON.parse(await client.get(id))
+})

1.nuxt/1.essentials/7.store-management/package.json

@@ -0,0 +1,47 @@
+'use strict'
+
+// https://redis.io/docs/clients/nodejs/
+import { createClient } from 'redis'
+
+// https://nitro.unjs.io/guide/introduction/routing#specific-request-method
+// https://nuxt.com/docs/guide/directory-structure/server#matching-http-method
+// https://nuxt.com/docs/guide/directory-structure/server#handling-requests-with-body
+export default eventHandler(async event => {
+  const runtimeConfig = useRuntimeConfig()
+  const cartId = runtimeConfig.public['appCartId']
+
+  // Get the value of the cart from cookie and use it to set a key in Redis
+  // db, e.g. `example.com:cart:1683665729834`.
+  // const cookie = event.req.headers.cookie
+  // console.log('cookie =', cookie)
+
+  // Use the `getCookie` API from h3 to retrieve your cookie in the headers.
+  // https://nuxt.com/docs/api/composables/use-cookie#handling-cookies-in-api-routes
+  const value = getCookie(event, cartId) || null
+  const key = value ? `${cartId}:${value}` : null
+
+  // Stop right here if no key.
+  if (!key) {
+    return null
+  }
+
+  const body = await readBody(event)
+
+  const client = createClient()
+  client.on('error', err => console.log('Redis Client Error', err))
+  await client.connect()
+
+  // Expire in [x] days.
+  // const days = 30
+  // const expire = days * 24 * 60 * 60
+  
+  // Expire in [x] minutes.
+  const expire = 5 * 60
+
+  // Sets a time-to-live (TTL) of one minute for the cached data,
+  // after which it will expire and the next request will have to
+  // set the data again.
+  // EX seconds -- Set the specified expire time, in seconds.
+  // https://redis.io/commands/set/
+  return await client.set(key, JSON.stringify(body), { 'EX': expire })
+})

1.nuxt/1.essentials/7.store-management/server/api/carts/[id].ts

@@ -0,0 +1,3 @@
+export default eventHandler(() => {
+  return { message: 'Hello World!' }
+})