Type of this of actions in setup (composition API) stores

[segevfiner]

When defining actions in setup stores (composition API) what should the type of this be?

import { ref } from 'vue';
import { defineStore } from 'pinia';

export const useExampleStore = defineStore('example', () => {
  const x = ref(0);
  const y = ref('foo');

  function wat(this: ???) {
    this.$patch({
      x: 123,
      y: 'bar',
    });
  }

  return {
    x,
    y,
    wat,
  };
});

[posva]

there is no this and no $patch() within setup stores. For setup stores, $patch() is only available when consuming the stores.

As for the type of this, I think you could do:

export const useExampleStore = defineStore('example', () => {
  const x = ref(0);
  const y = ref('foo');

  // Probably needed to type the return value
  function wat(this: Store): void {
    this.$patch({
      x: 123,
      y: 'bar',
    });
  }

  return {
    x,
    y,
    wat,
  };
});

type Store = ReturnType<typeof useExampleStore>

[segevfiner]

Not inside the setup store itself. But in an action, which is a function with its own separate this, defined inside the store there is. Check the example above.

[posva]

What I mean is that this is not intended behavior so you shouldn't rely on it because it could break in the future 😅

As for the type of this, I think you could do:

export const useExampleStore = defineStore('example', () => {
  const x = ref(0);
  const y = ref('foo');

  // Probably needed to type the return value
  function wat(this: Store): void {
    this.$patch({
      x: 123,
      y: 'bar',
    });
  }

  return {
    x,
    y,
    wat,
  };
});

type Store = ReturnType<typeof useExampleStore>

[segevfiner]

Really? Shouldn't actions have access to $patch? They have access to it in the options API. Makes sense for them to have access to it in the composition API as well.

[segevfiner]

this.$patch will only be available inside an action (Maybe in a getter computed as well, not sure)? It works today and it kinda makes sense as this is the same way that it works in the options API, why shouldn't it work for setup stores? The only thing missing really is typing. Just Store is not enough as then state will be any, I wonder if there is any TypeScript trickery possible to correctly type state or if we should just use a partial shim type over what we are going to modify.

[TonnyWildeman]

To get the type of the state correct you can type the setupStore function return type explicitly.

• "pinia": "^2.2.0",
• "vue": "^3.4.34",
• "typescript": "^5.5.4"

type ExampleStoreDefinition = {
   x: Ref<number>;
   y: Ref<string>;
   wat: ()=>void; // not sure about the function definition though
}

export const useExampleStore = defineStore('example', () : ExampleStoreDefinition => {
  const x = ref(0);
  const y = ref('foo');

  // Probably needed to type the return value
  function wat(this: Store): void {
    this.$patch({
      x: 123,
      y: 'bar',
    });
  }

  return {
    x,
    y,
    wat,
  };
});

type Store = ReturnType<typeof useExampleStore>

[segevfiner]

Not using patch, which will cause a lot of unnecessary additional updates of reactive dependencies, harming performance.

Btw this is not true in Vue, so you don’t need to worry about changes multiple things one after the other. There will always be one render :)

@posva What do you mean? Should we just skip using $patch in setup stores? Is it something that's not really needed and as such there is no need to add support for it to setup stores?

[segevfiner]

#1509 (comment) @posva or someone else? Can you please reply?