Private state and automatic store disposal in options stores

[Ilanaya]

Recently I encountered a case when I needed a private state in the options API store. While searching for an answer I found it in this article

This works like a charm in setup stores but doesn't fully resolve the issue when using options stores, i.e.

// store.js
import { defineStore } from 'pinia';

export const usePrivate = defineStore('auth-private', () => {
  const token = null;
  return {
    token,
  };
});

const myStore = defineStore('my-store', {
  state: () => ({
    name: 'Eduardo',
  }),
  getters: {
    privateStore() {
      return usePrivate();
    },
  },
  actions: {
    getToken() {
      if (this.privateStore.token) {
        return this.privateStore.token;
      }
      return 'no token';
    },
  },
})();

const TOKEN = myStore.privateStore.token;

Here I see two issues:

1. Anyone can access the data from the privateStore, so this is not a private data
2. If I want to delete this private store I have to do it outside of the store i.e.:

import myStore from './myStore';

onBeforeUnmount(() => {
  myStore.$dispose();
  myStore.privateStore.$dispose();
});

This looks a bit funny to me as someone (I mean other components) always should know about the store's private state.

---

I'll be very happy if these issues can be somehow resolved in options stores, but I don't think this is possible with the current pinia API.

Of course, this is only a limitation of the options API stores and can be easily resolved just by using setup stores, but this leads to an inconsistency in the codebase as options store syntax is suggested by default in this pinia docs.

I suggest:

• A more detailed guide on how to choose the store syntax and possible options stores limitations.

[posva]

FYI: options stores are not the default. You can use both in the same project (mentioned in docs). They cater to different ways of organization, but due to the nature of the setup stores, they will always be more flexible than option stores.

In your case, the private store is accessible because you return it in a getter. To keep it private, you need to call useStore() in every action and getter that needs it. If that repetition bothers you, I recommend you to switch over to setup stores.

[Ilanaya]

Thanks for your reply!

1. FYI: options stores are not the default. You can use both in the same project (mentioned in docs)

I understand that options stores are not "default", I mean that they are suggested to try first. By this discussion, I only wanted to highlight to you some possible docs problems.

For example, our team started using different stores api only after the discovery of these options api store problems, which resulted in some time spent rewriting some options api stores to setup syntax. Maybe if some options stores drawbacks were described more clearly in What syntax should I pick (or any other related section) we would start by using the setup stores.

2. To keep it private, you need to call useStore() in every action and getter that needs it.
   Thanks, I saw this in docs but dropped this method as:

• This repetition indeed bothers us :)
• In our app, we are currently disposing and deleting unused stores. We find it useful as at least debugging is made easier as dev tools are not polluted with unrelated stores. I didn't find a way to delete and dispose store if we call useStore() in every action and getter.

Feel free to close this discussion at any time if you think this is unrelated or if you have any other reasons.

[posva]

I do want to update the docs to better show the different syntaxes but I lack the funding (by companies) to spend time on it 🫠

I didn't find a way to delete and dispose store if we call useStore() in every action and getter.

It shouldn't be a problem as long as you dispose both stores

[Ilanaya]

I do want to update the docs to better show the different syntaxes but I lack the funding (by companies) to spend time on it

Ok, that's reasonable, in any case I respect your time and not forcing you to do anything

It shouldn't be a problem as long as you dispose both stores
Sorry, I didn't quite understand

Can you check this demo?

1. Open demo - see that initially, both stores are present
2. Click the 'Delete store' button
3. See only 'my-store' was deleted and 'auth-private' is still in state

My question is - how do I delete the private store using the options store syntax in this case? I can't access the private store outside of the file where it is defined so I need some way to delete store in inside it (sadly, I can't use onScopeDispose api in options stores).

The only way I found is to define a pinia plugin which will handle store deletion and add an extra action that should be called when the store is deleted. Demo

Maybe there is a more elegant way to do this?

[posva]

You have many ways. The easiest way is to export a function to dispose the store. The plugin approach should also work

[martishkaass]

Lol 🤡