State doesn't seem to be persisted using Nuxt 2 and secure-ls package

[theolavaux]

Describe the bug
I'm using Nuxt 2 and I would like to persist my state using the secure-ls package.
If I put log in getItem, setItem or removeItem, none seems to be called.
And my state is not persisted after a page refresh for instance.

To Reproduce
Reproduction link

Steps to reproduce the behavior:

1. Create a Nuxt 2 project.
2. Implement basic Pinia state.
3. Install pinia-plugin-persistedstate2.
4. Create a file named pinia.client.ts with the following content.

import { Plugin } from '@nuxt/types';
import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2';
import SecureLS from 'secure-ls';

const piniaPersistedStatePlugin = () => {
  const ls = new SecureLS({ isCompression: false });

  createPersistedStatePlugin({
    storage: {
      getItem: (key) => ls.get(key),
      setItem: (key, value) => ls.set(key, value),
      removeItem: (key) => ls.remove(key),
    },
  });
};

const piniaPlugin: Plugin = ({ $pinia }) => {
  $pinia.use(piniaPersistedStatePlugin);
};

export default piniaPlugin;

Expected behavior
State is persisted

[soc221b]

The createPersistedStatePlugin function will return an install function, we need to register it:

- const piniaPersistedStatePlugin = () => {
+ const piniaPersistedStatePlugin = (context) => {
  const ls = new SecureLS({ isCompression: false });

- createPersistedStatePlugin(/* ... */);
+ const install = createPersistedStatePlugin(/* ... */);
+ install(context);
};

[soc221b]

I've updated the usage section:

6959cb6

Hope this helps you. 😄

[theolavaux]

Awesome! It works now, only one problem left: if I clear the localStorage, the first time the state is fetched, I get this error 🤔

[theolavaux]

Here is my code

[theolavaux]

I found the culprit! I went into the debugger and in my case here the value equals an empty string 😢
That's why I get an exception

https://github.com/iendeavor/pinia-plugin-persistedstate-2/blob/3b9e20421c51c1dd0aa648baaba6587e67010ac3/src/plugin.ts#L147

[soc221b]

In general, if the key does not exist, null or undefined will be returned.

• Storage API
• React-native-async-storage
• IndexedDB

For secure-ls, we have a workaround:

  const install = createPersistedStatePlugin({
    deserialize: (value) => {
      if (value === "") {
        return null;
      } else {
        return JSON.parse(value);
      }
    },
    // ...

https://codesandbox.io/s/romantic-sun-fhwi4d?file=/plugins/pinia.client.js:260-401

[theolavaux]

Oh you're right! Forgot that I could tweak this method too, thanks👌