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

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>

CodePudding user response：

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.