Functional `key` option

[EranosyanEduard]

Clear and concise description of the problem

Hello. I'd like to have functional key option. Functional Key should to compute while read/write a data to/from a storage.

Example:

import { defineStore } from 'pinia'
import getKey from './getKey.js'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  persist: {
    key: () => {
      return getKey()
    }
  }
})

Thank you.

Suggested solution

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[andrey-hohlov]

It was the option but it stopped working since v4 and it's a big blocker for us to upgrade

[EranosyanEduard]

@andrey-hohlov

It was the option but it stopped working since v4 and it's a big blocker for us to upgrade

Our team uses the "persist.storage" option in the "defineStore" function to use the function key.

/** @file Custom storage */
import type { StorageLike } from 'pinia-plugin-persistedstate';
import getKey from './getKey'

class Storage implements StorageLike {
  getItem(storeId: string): string | null {
    return this.getItemByStorageId(storeId)
  }

  setItem(storeId: string, serializedStoreState: string): void {
    return this.setItemByStorageId(storeId)
  }

  private getItemByStorageId(storeId: string): string | null {
    const serializedState = localStorage.getItem(getKey());
    if (typeof serializedState !== 'string') return null;
    const deserializedState = JSON.parse(serializedState);
    return Object.hasOwn(deserializedState, storeId) ? JSON.stringify(deserializedState[storeId]) : null;
  }

  private setItemByStorageId(storeId: string, serializedStoreState: string): void {
    const storageKey = getKey();
    const serializedState = localStorage.getItem(storageKey);
    const deserializedState = typeof serializedState === 'string' ? JSON.parse(serializedState) : {};
    deserializedState[storeId] = JSON.parse(serializedStoreState);
    localStorage.setItem(storageKey, JSON.stringify(deserializedState));
  }
}

export default new Storage()

/** @file Custom storage example */
import { defineStore } from 'pinia'
import storage from './Storage'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  persist: {
    pick: ['counter'],
    storage
  }
})

[andrey-hohlov]

@EranosyanEduard nice workaround, thanks for sharing it
(but anyway it's nice to have key function)