SSR Hydration with Computed property

[Vap0r1ze]

The docs very briefly speak about the skipHydrate utility, but I'm not very certain what it does exactly or how to get it to work with computed state. Here's what I'm trying to do, if I toggle the theme to light and refresh, themeStore.theme will properly load as "light" but the computed isDark state will not.

[posva]

you can only skipHydrate on state, so no need to use it in isDark
prefersDark is state you need to return it and it should also skipHydrate since the state comes from the client
There is no onMounted() in stores, that's a component lifecycle method
so just use if (typeof document !== 'undefined') change prefers dark

Here is the fixed version: https://play.pinia.vuejs.org/#eNqVVVtv0zAU/ismDzSV2mRjMKStLeUyCRADxPaYlyw5Tb06tmU7baeu/51jO0mTscF4qnMu3/nOtbvgvZTRuoLgLJjoTFFpiAZTScJSXkyTwOgkmCWcllIoQ3ak0nC9hBKujFBA9mShREkGUWysMDJ6kPCEZ4JrQ5yITPsu4TDhk9hHQlz8MFBKlhrAL0ImN5UxgpN5xmi2svE9rigKZn2D2bV7evBJ7M29q5y5MGdkt/PqyDPY7yexRJNJ3IYKRoHPaFymMrrVgmP+O4uS1ApMG4GsxMok5TS1kiSI3TsCXY5vlNhoUOifBKPGdI7FxIzjDJP1HktjpD6L4yznaJoDo2sVcTAxl2XcNZ8fH0Vvo1cx5Tlso/JRWL1MFeT/Aewd/gUd57A2QjA9TiV9JnrPZ34avYmOY0ZvYixNHacXBj3GOZTPQW9M50fR8evo1KGuT7rkLeg+4XtspNE4bgtaPGhjJkpJGagf0lAcx147U8bE5quTGVVBSzFbQrZ6RH6rt571TwXY8DU2ttWZVBVgvPri6jts8d0qS5FXrB6DJ5S/QAtWWY7e7EPFc6TdsXNsv7ippLy41hdbA1w3SVmirhrO3pX5419SP9A9iU66Vaz3FwvY7noOC8r92o6IXlH5+S5XuD7t2rtVwI1vPRQsRsRWvjKQj4jgl6Li+Gw9kF3XHgf0m8hSZmOkxQG4uxXuosDWeZg7CcRtOd6VAaPF0gzIPRnkqVrZB68YO2+t/RnqX6xpN6tw4NIejEg4JNOZr1L/eHXSDh+wnTjY2QHERh/ifTugSCwIKP0J6T3AQkVoW2ftG2vaGDYVDD0t35t1yipkNMXE63TvSdhXOQbk5ctuXK8cDrEshNAFumANxYLkIqtK4Ia8sIg4dK4s+WBI/Kj8AYG8NriBYhOVqcmWl5DTNEyCsDYcZ4IJNda4Q/YGW4p4rofeGLSvyqLimZ1J0hz0ZjB7eTyV8Lu25We1qB5g+6PwX0txnKkOYL1CnVRqiQ9ff/iyuw+7DMPzYP8bnYxkYQ==

BTW, I go through some of these advanced concepts in my course: https://masteringpinia.com/
You might find it interesting 🙌