我有一個 Nuxt SSR 應用程式，需要在點擊鏈接時打開新視窗，但新視窗在商店中沒有實際資料。只有默認值。如何在這兩個頁面之間共享商店中的實際值？
這是要求貨幣價值的新頁面的代碼：
<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>
uj5u.com熱心網友回復：
是的，如果您打開一個新選項卡，Vue 將需要從一開始就重新水合，您不能僅使用 Vue 將狀態從一個頁面轉移到另一個頁面。
您需要使用一些東西來持久化資料。快速搜索會找到這個確切的答案，其中包含更多詳細資訊：https ://stackoverflow.com/a/66872372/8816585
因此，使用 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填充在另一個頁面（但是，相同的檔案）中，并且一切都應該正常作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/473063.html
標籤：javascript Vue.js nuxt.js Vuex
上一篇：vue3<scriptsetup>是否可以使用組件，如何使其作業？
下一篇：Vuex：為什么要禁用嚴格模式？