]> git.ipfire.org Git - thirdparty/vuejs/pinia.git/commitdiff
refactor: remove getRootState
authorEduardo San Martin Morote <posva13@gmail.com>
Thu, 7 Jan 2021 16:20:07 +0000 (17:20 +0100)
committerEduardo San Martin Morote <posva13@gmail.com>
Thu, 7 Jan 2021 16:20:07 +0000 (17:20 +0100)
BREAKING_CHANGE: Since req as a parameter was replacetd with `pinia`, `getRootState` is no longer necessary. Replace it with `pinia.state.value` to read the root state`

README.md
__tests__/rootState.spec.ts
src/index.ts
src/rootStore.ts

index e4b938eadcf96ba83d6d70eea9c10445677ce103..d11bbc0951eae6f6e5606dea978f387b8b532755 100644 (file)
--- a/README.md
+++ b/README.md
@@ -294,7 +294,7 @@ router.beforeEach((to) => {
 To hydrate the initial state, you need to make sure the rootState is included somewhere in the HTML for Pinia to pick it up later on:
 
 ```js
-import { createPinia, getRootState } from 'pinia'
+import { createPinia } from 'pinia'
 // retrieve the rootState server side
 const pinia = createPinia()
 const app = createApp(App)
@@ -302,16 +302,23 @@ app.use(router)
 app.use(pinia)
 
 // after rendering the page, the root state is build and can be read
-getRootState() // serialize, escape, and place it somewhere on the page, for example, as a global variable
+// serialize, escape (VERY important if the content of the state can be changed
+// by the user, which is almost always the case), and place it somewhere on
+// the page, for example, as a global variable.
+JSON.stringify(pinia.state.value)
 ```
 
-On client side, you must tell pinia how to read that variable:
+On client side, you must hydrate pinia's state before calling any `useStore()` function. For example, if we serialize the state into a `<script>` tag to make it accessible globally on client side through `window.__pinia`, we can write this:
 
 ```js
-import { setStateProvider } from 'pinia'
+const pinia = createPinia()
+const app = createApp(App)
+app.use(pinia)
 
-// if the previous step appended a script to the page that sets a global variable named `__pinia` with the rootState
-setStateProvider(() => window.__pinia)
+// must be set by the user
+if (isClient) {
+  pinia.state.value = JSON.parse(window.__pinia)
+}
 ```
 
 ### Composing Stores
index b0f0635a1bd4c9ee78fefd7063ff92f43162da36..6511d37ee58f5d27e59417de40f3dead0e7c2ff6 100644 (file)
@@ -1,4 +1,4 @@
-import { createPinia, defineStore, getRootState } from '../src'
+import { createPinia, defineStore } from '../src'
 
 describe('Root State', () => {
   const useA = defineStore({
@@ -12,13 +12,13 @@ describe('Root State', () => {
   })
 
   it('works with no stores', () => {
-    expect(getRootState(createPinia())).toEqual({})
+    expect(createPinia().state.value).toEqual({})
   })
 
   it('retrieves the root state of one store', () => {
     const pinia = createPinia()
     useA(pinia)
-    expect(getRootState(pinia)).toEqual({
+    expect(pinia.state.value).toEqual({
       a: { a: 'a' },
     })
   })
@@ -28,10 +28,10 @@ describe('Root State', () => {
     const pinia2 = createPinia()
     useA(pinia1)
     useB(pinia2)
-    expect(getRootState(pinia1)).toEqual({
+    expect(pinia1.state.value).toEqual({
       a: { a: 'a' },
     })
-    expect(getRootState(pinia2)).toEqual({
+    expect(pinia2.state.value).toEqual({
       b: { b: 'b' },
     })
   })
@@ -40,7 +40,7 @@ describe('Root State', () => {
     const pinia1 = createPinia()
     useA(pinia1)
     useB(pinia1)
-    expect(getRootState(pinia1)).toEqual({
+    expect(pinia1.state.value).toEqual({
       a: { a: 'a' },
       b: { b: 'b' },
     })
index 31b5c48890715e0fcae01614bb32c9c48f6b9a95..8fc6e85febbb8076e586c29082328ea20524ce93 100644 (file)
@@ -1,6 +1,5 @@
 export {
   setActivePinia,
-  getRootState,
   createPinia,
   Pinia,
   PiniaStorePlugin,
index 93b3ddc2ff175edf3862503d1d8bdce5feed92b7..0d0422bf7a154ac27f0c94cd51aa98f54e0dcbce 100644 (file)
@@ -52,6 +52,7 @@ export const storesMap = new WeakMap<
 /**
  * Gets the root state of all active stores. This is useful when reporting an application crash by
  * retrieving the problematic state and send it to your error tracking service.
+ *
  * @param pinia - application's pinia
  */
 export function getRootState(pinia: Pinia): Record<string, StateTree> {