Nuxt SSR app does not share date from store between two windows

Question

I have a Nuxt SSR app which need to open new window on link click, but new window does not have actual data in the store. There are only default values. How can I share actual values in the store between this two pagaes?

This is the code of new page which ask for currency value:

<template>
  <DeviceDetail :pdevice="device" :location="location" />
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  async asyncData(context) {
    try {
      const deviceId = context.params.device_id.split('-').pop() // url == device-name-id
      const currency = context.store.state.i18.currency // This is a problem
      const route = context.route

      const { data: device } = await context.$api.devices.getDeviceDetail(
        deviceId,
        currency
      )

      const locationId = device.data.location_id

      const { data: location } = await context.$api.locations.getLocation(
        locationId
      )

      return {
        device: device.data,
        location: location.data,
      }
    } catch (error) {
      console.error(error)
    }
  },
  data() {
    return {
      device: null,
      location: null,
    }
  },
})
</script>

kissu · Accepted Answer · 2022-05-12T11:56:40.337

Yes, if you open a new tab, Vue will need to re-hydrate from the start, you cannot transfer the state from one page to the other with just Vue.

You'll need to use something to persist the data. A quick search brings up this exact answer with quite more details: https://stackoverflow.com/a/66872372/8816585

So, using localStorage could be a simple and quick way of getting things done

localStorage.setItem('persistThisData', JSON.stringify(coolData))

Then, on the other side

const coolData = JSON.parse(localStorage.getItem('persistThisData'))

Query params could also be a solution with

this.$router.push({ path: '/nice-page', query: { type: 'beautiful' } })

And getting it on the other side with

this.$route.query.type

A conditional checking if coolData is populated in the other page (yet, same file) and everything should be working fine.

Nuxt SSR app does not share date from store between two windows

1 Answers1