Tengo una aplicación Nuxt SSR que necesita abrir una nueva ventana al hacer clic en el enlace, pero la nueva ventana no tiene datos reales en la tienda. Solo hay valores predeterminados. ¿Cómo puedo compartir valores reales en la tienda entre estos dos pagaes?
Este es el código de la nueva página que solicita el valor de la moneda:
<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>Sí, si abre una nueva pestaña, Vue deberá rehidratarse desde el principio, no puede transferir el estado de una página a otra solo con Vue.
Tendrá que usar algo para conservar los datos. Una búsqueda rápida muestra esta respuesta exacta con bastante más detalles: https://stackoverflow.com/a/66872372/8816585
Entonces, usar localStorage podría ser una forma simple y rápida de hacer las cosas.
localStorage.setItem('persistThisData', JSON.stringify(coolData))Luego, del otro lado
const coolData = JSON.parse(localStorage.getItem('persistThisData'))Los parámetros de consulta también podrían ser una solución con
this.$router.push({ path: '/nice-page', query: { type: 'beautiful' } })Y conseguirlo en el otro lado con
this.$route.query.type Una verificación condicional si coolData se completa en la otra página (aún, el mismo archivo) y todo debería funcionar bien.