From e2b6b04f94e65f9dd9000104c22074d4496cc8de Mon Sep 17 00:00:00 2001 From: Matteo Rigoni Date: Wed, 24 Nov 2021 15:41:31 +0100 Subject: [PATCH 1/2] fix: fixed reactivity on client of useState reactive payload --- packages/bridge/src/runtime/composables.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/bridge/src/runtime/composables.ts b/packages/bridge/src/runtime/composables.ts index 3673b7eabbd..36d1a84765e 100644 --- a/packages/bridge/src/runtime/composables.ts +++ b/packages/bridge/src/runtime/composables.ts @@ -1,4 +1,4 @@ -import { getCurrentInstance, onBeforeUnmount, isRef, watch, reactive, toRef, isReactive, Ref } from '@vue/composition-api' +import { getCurrentInstance, onBeforeUnmount, isRef, watch, reactive, toRef, isReactive, Ref, set } from '@vue/composition-api' import type { CombinedVueInstance } from 'vue/types/vue' import type { MetaInfo } from 'vue-meta' import type VueRouter from 'vue-router' @@ -57,6 +57,12 @@ export const useState = (key: string, init?: (() => T)): Ref => { if (!isReactive(nuxtApp.payload.useState)) { nuxtApp.payload.useState = reactive(nuxtApp.payload.useState) } + + // see @vuejs/composition-api reactivity tracking on a reactive object with set + if (!(key in nuxtApp.payload.useState)) { + set(nuxtApp.payload.useState, key, undefined) + } + const state = toRef(nuxtApp.payload.useState, key) if (state.value === undefined && init) { state.value = init() From 2c1f2e02ae55a4f63246c0a5ef62fd28d3d436fe Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 24 Nov 2021 15:04:56 +0000 Subject: [PATCH 2/2] style: remove trailing spaces --- packages/bridge/src/runtime/composables.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/bridge/src/runtime/composables.ts b/packages/bridge/src/runtime/composables.ts index 36d1a84765e..4e3474e7708 100644 --- a/packages/bridge/src/runtime/composables.ts +++ b/packages/bridge/src/runtime/composables.ts @@ -57,12 +57,12 @@ export const useState = (key: string, init?: (() => T)): Ref => { if (!isReactive(nuxtApp.payload.useState)) { nuxtApp.payload.useState = reactive(nuxtApp.payload.useState) } - + // see @vuejs/composition-api reactivity tracking on a reactive object with set if (!(key in nuxtApp.payload.useState)) { - set(nuxtApp.payload.useState, key, undefined) + set(nuxtApp.payload.useState, key, undefined) } - + const state = toRef(nuxtApp.payload.useState, key) if (state.value === undefined && init) { state.value = init()