From: Eduardo San Martin Morote Date: Wed, 18 Aug 2021 18:25:38 +0000 (+0200) Subject: fix(ssr): convert hydrated state to refs X-Git-Tag: @pinia/nuxt@0.0.1~18 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=3f186a28e954cd4ccb48e4f26448a96cb0a0d7e1;p=thirdparty%2Fvuejs%2Fpinia.git fix(ssr): convert hydrated state to refs Fix #619 --- diff --git a/packages/pinia/__tests__/getters.spec.ts b/packages/pinia/__tests__/getters.spec.ts index 50fbd8bd..fca05ffb 100644 --- a/packages/pinia/__tests__/getters.spec.ts +++ b/packages/pinia/__tests__/getters.spec.ts @@ -1,40 +1,40 @@ import { createPinia, defineStore, setActivePinia } from '../src' describe('Getters', () => { - const useStore = () => { - // create a new store + beforeEach(() => { setActivePinia(createPinia()) - return defineStore({ - id: 'main', - state: () => ({ - name: 'Eduardo', - }), - getters: { - upperCaseName(store) { - return store.name.toUpperCase() - }, - doubleName(): string { - return this.upperCaseName - }, - composed(): string { - return this.upperCaseName + ': ok' - }, - arrowUpper: (state) => { - // @ts-expect-error - state.nope - state.name.toUpperCase() - }, + }) + + const useStore = defineStore({ + id: 'main', + state: () => ({ + name: 'Eduardo', + }), + getters: { + upperCaseName(store) { + return store.name.toUpperCase() + }, + doubleName(): string { + return this.upperCaseName }, - actions: { - o() { - // @ts-expect-error it should type getters - this.arrowUpper.toUpperCase() - this.o().toUpperCase() - return 'a string' - }, + composed(): string { + return this.upperCaseName + ': ok' + }, + arrowUpper: (state) => { + // @ts-expect-error + state.nope + state.name.toUpperCase() + }, + }, + actions: { + o() { + // @ts-expect-error it should type getters + this.arrowUpper.toUpperCase() + this.o().toUpperCase() + return 'a string' }, - })() - } + }, + }) const useB = defineStore({ id: 'B', @@ -90,4 +90,15 @@ describe('Getters', () => { store.name = 'Ed' expect(store.composed).toBe('ED: ok') }) + + it('keeps getters reactive when hydrating', () => { + const pinia = createPinia() + setActivePinia(pinia) + pinia.state.value = { main: { name: 'Jack' } } + const store = useStore() + expect(store.name).toBe('Jack') + expect(store.upperCaseName).toBe('JACK') + store.name = 'Ed' + expect(store.upperCaseName).toBe('ED') + }) }) diff --git a/packages/pinia/src/store.ts b/packages/pinia/src/store.ts index 992bad3f..2eb199dc 100644 --- a/packages/pinia/src/store.ts +++ b/packages/pinia/src/store.ts @@ -118,7 +118,7 @@ function createOptionsStore< __DEV__ && hot ? // use ref() to unwrap refs inside state TODO: check if this is still necessary toRefs(ref(state ? state() : {}).value) - : initialState || toRefs(pinia.state.value[id]) + : toRefs(pinia.state.value[id]) return assign( localState,