Nuxt SSR 应用程序不会在两个 windows 之间共享商店的日期

Question

我有一个 Nuxt SSR 应用，需要在 link 点击时打开新的 window，但新的 window 在商店中没有实际数据。只有默认值。如何在这两个页面之间共享商店中的实际值？

这是请求币值的新页面代码：

<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>

Answer 1

是的，如果您打开一个新选项卡，Vue 将需要从一开始就re-hydrate，您不能仅使用 Vue 将状态从一个页面转移到另一个页面。

您需要使用一些东西来保存数据。快速搜索可以找到包含更多详细信息的确切答案：

因此，使用 localStorage 可能是一种简单快捷的完成任务的方法

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

然后，另一边

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

查询参数也可以是

的解决方案

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

然后用

在另一边得到它

this.$route.query.type

有条件地检查 coolData 是否已填充到其他页面（但同一个文件）并且一切正常。

Nuxt SSR 应用程序不会在两个 windows 之间共享商店的日期

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

javascript

vue.js

vuex

nuxt.js