Reusing Nuxt server state on the client with a setup store

[obulat]

At Openverse, we are converting ¹ our state management from Vuex to Pinia. We are using Nuxt 2 with Composition API, and have converted most stores to setup stores.

However, we are now facing a problem with hydrating the state in a setup store. The callback inside the store setup function runs both on the server and on the client. If we create a state object using reactive, it is recreated on the client, and does not use the data that comes from the server.

What is the correct way of reusing the Nuxt server state on the client in a setup store?

I tried a hack using a state from window.$nuxt on the client to intialize the state reactive object, if it's available:

const initialState: SearchState = {
    searchType: 'image',
    searchTerm: 'cat'
}
const initializeState = () => {
    let stateObject = initialState
    if (isClient) {
    const existingSearchState = window.$nuxt.context.$pinia.state.value.search
    if (existingSearchState) {
      stateObject = JSON.parse(JSON.stringify(existingSearchState)) as SearchState
    }

    return reactive(stateObject)
  }
  const state = initializeState()

I used JSON.parse(JSON.stringify()) because without it I get recursion errors.
It works, but it seems too hacky.

Thank you for all your work on the Vue ecosystem.

Footnotes

1. Our RFC for converting to Pinia https://github.com/WordPress/openverse/blob/c9869ac42cbddada64bab15e5892519dfda24e1f/rfcs/20220223-convert_the_store_from_vuex_to_pinia.md ↩

[obulat]

I've found the solution for this problem in Pinia documentation: https://pinia.vuejs.org/cookbook/composables.html#ssr

The ref values that should not be re-initialized on the client side need to use skipHydration helper function:

import { defineStore, skipHydrate } from 'pinia'
import { useEyeDropper, useLocalStorage } from '@vueuse/core'

export const useColorStore = defineStore('colors', () => {
  const { isSupported, open, sRGBHex } = useEyeDropper()
  const lastColor = useLocalStorage('lastColor', sRGBHex)
  // ...
  return {
    lastColor: skipHydrate(lastColor), // Ref<string>
    open, // Function
    isSupported, // boolean (not even reactive)
  }
})

(The code is from the Composables/SSR page that is linked above).

[murobbani18]

thanks for this great answer, it solves my problem 👏
Actually, I have a different problem which is vue persistent, it use cookie to store the data. Cookie has a limited size of storage by 4096 bytes per key, and my data size is bigger than that, so I must switch to localStorage by using vue useStorage. The main problem is that useStorage didn't load the existing data which is stored in local storage, and use the default value that I declared before. I followed some solutions from stack overflow and didn't get what I wanted. This may be caused by the SSR mode of nuxt 3 that didn't know localStorage which is run on the client side. Once again thanks for your answer 👍