]> git.ipfire.org Git - thirdparty/vuejs/pinia.git/commitdiff
fix(ssr): convert hydrated state to refs
authorEduardo San Martin Morote <posva13@gmail.com>
Wed, 18 Aug 2021 18:25:38 +0000 (20:25 +0200)
committerEduardo San Martin Morote <posva13@gmail.com>
Wed, 18 Aug 2021 18:25:38 +0000 (20:25 +0200)
Fix #619

packages/pinia/__tests__/getters.spec.ts
packages/pinia/src/store.ts

index 50fbd8bdad18e63b64ba308865bcd76b054f4ee4..fca05ffb6721bd76ddd90ef9263e02f1e4c1885f 100644 (file)
@@ -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')
+  })
 })
index 992bad3f4e8c3f321c53f918090a117f36bb7472..2eb199dcdc25550d69e92b24aac97449ed466170 100644 (file)
@@ -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,