Typing breaks when using non-string 'id' state property

[LadislavBohm]

Reproduction

export const useMainStore = defineStore({
  id: "main",
  state: () => ({
    id: 1,
    counter: 0,
  }),
  getters: {
    doubleCount() {
      //this works
      return this.counter * 2;
    },
  },
  actions: {
    reset() {
      //this no longer works, 'this' is not typed to store instance
      this.counter = 0;
    }
  }
});

Steps to reproduce the behavior

1. Define store with state property 'id' and some type other than string
2. Define action and try to access the store
3. 'this' is not typed to instance of store, so cannot access state or patch it

Expected behavior

I should be able to define any properties with any types in the state.

Additional information

Most likely it's a collision with 'id' property on store itself which is typed as string. It works as expected in getters just actions are broken.

[posva]

This is an interesting one. It makes me realize maybe all properties of the store should be prefixed with $ (maybe with the exception of patch) since they are directly accessible on the store instance. Defining an id on state will override the store's id property and break things like devtools. Same with properties named patch, subscribe, state or reset

[LadislavBohm]

Very fast response, thanks. I agree that prefixing sounds like a good idea. Maybe also prefixing _r private property to maintain consistency?

[posva]

it's already prefixed with _ and it's unlikely to be defined by the user given its short, prefixed, and non-descriptive name, so I prefer keeping it like that. Pretty much like we have in other parts of the Vue ecosystem