Dynamic class binding not working as expected with Session Storage

[naseefpv]

Describe the bug

I installed a pinia-plugin-persistedstate with latest Nuxt and created a store with persist enabled by Session storage class.
Tried to bind an element class with the state from the above store, it updates the class correctly without persist data but when reload with the persist data, class binding is not working.
please refer the stackbliz below
https://stackblitz.com/edit/nuxt-starter-ugwj2c?file=stores%2Fmain.js

Reproduction

.

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 2.69 GB / 15.49 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
    bun: 1.0.16 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 99.1.36.116
    Chrome: 119.0.6045.123

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible of the bug.

[prazdevs]

Hi, thanks for the proper reproduction :)

This is an SSR related issue:
Since you are using session storage, the value is only stored client-side, but the page is rendered server side so it'll use whatever value is in pinia at the time, that is the default ('initial-text').

To have what you want working you need to use ssr: false in your nuxt config :)

[Dev-R]

Hi @prazdevs,

Firstly, thank you for your exceptional work on Pinia-persistedstate!

I have a question unrelated to this issue.

I've set up a store called 'profile' and configured it to use persistent storage as follows:

// profile.store.ts

/**
 * Manages the profile store and its state.
 */
export const useProfileStore = defineStore('profile', () => {
    ...
    return {
        ...
    }
}, {
    // Pinia persist configuration
    persist: {
        storage: persistedState.localStorage,
    }
})

Now, I'm looking for a way to reset or clear the store state from the storage. I attempted the following approach, but it doesn't seem to work:

const clearProfileStoreState = () => {
    localStorage.removeItem('profile');
}

Any guidance on how to achieve this would be greatly appreciated!

Thank you!

[prazdevs]

Hi @Dev-R calling such a function worked on my side, you may want to open a proper issue with a proper reproduction repo so i could eventually investigate and help you with it.

I'll be closing this one since og issue should be solved

[oawebdev]

Hi, thanks for the proper reproduction :)

This is an SSR related issue: Since you are using session storage, the value is only stored client-side, but the page is rendered server side so it'll use whatever value is in pinia at the time, that is the default ('initial-text').

To have what you want working you need to use ssr: false in your nuxt config :)

Hello!
Do you have any solution for this issue when ssr enabled?