[Typescript] Define stores using a generic function

[JoostKersjes]

I'm experimenting with a generic function that can create a fully typed store.

In my actions, the items array is typed as an UnwrapRefSimple<T>[]. This means that Typescript doesn't allow me to mutate the array with an item typed T.

NOTE: This issue only occurs when working with generics. If I define a regular store, Typescript doesn't complain about UnwrapRefSimple.

import { defineStore } from "pinia";

type CollectionState<T> = { count: number; items: T[] };

export const collectionStoreFactory = <T extends { "v-id": string }>(
  name: string
) => {
  return defineStore(`${name}_collection`, {
    state: (): CollectionState<T> => ({
      count: 0,
      items: [],
    }),
    actions: {
      appendItem(item: T) {
        this.count++; // OK
        this.items.push(item); // TS2345: Argument of type 'T' is not assignable to parameter of type 'UnwrapRefSimple<T>'.
      },
    },
  });
};

If I change the code like this, Typescript no longer complains.

      appendItem(item: T) {
        this.count++; // OK
        const tempRef = ref<T>(item);
        this.items.push(tempRef.value); // OK
      },

I highly doubt that this "solution" has 0 unintended side-effects.

Maybe using generics to create stores is an anti-pattern. Maybe it is more fitting for my use case to define each store separately. I'm just exploring my options.

If somebody could point out what I'm doing wrong, that would be great :D

[angelhdzmultimedia]

I suspect the item you are passing to appendItem is a ref() , not a { "v-id": string } object (the value of the ref).

So either change the T type as Ref<T> everywhere if you want to store the ref, or change the type of item in appendItem to Ref<T> and read .value if you want to store the value of the ref.

   appendItem(item: Ref<T>) {
        this.count++; // OK
        this.items.push(item.value); 
      },

Just to be sure, comment out the line where you push the item to the array, and call console.log(item). If you get an instance of Proxy or a Ref or anything not an [object Object] , then it confirms my suspictions.

Wishing you success and health.

[JoostKersjes]

Thanks for the response!

My solution is (probably) this:

import { defineStore } from "pinia";
import { ref, Ref } from "vue";

type CollectionState<T> = { count: number; items: Ref<T[]> };

export const collectionStoreFactory = <T extends { "v-id": string }>(
  name: string
) => {
  return defineStore(`${name}_collection`, {
    state: (): CollectionState<T> => ({
      count: 0,
      items: ref<T[]>([]) as Ref<T[]>,
    }),
    actions: {
      appendItem(item: T) {
        this.count++;
        this.items.push(item); // this.items: T[]
      },
    },
  });
};

I found a vuejs/core thread that is related to this problem:
vuejs/core#2136

This does raise another question for me:
Should arrays and objects inside a state be wrapped in ref()?

[angelhdzmultimedia]

Thanks for the response!

My solution is (probably) this:

import { defineStore } from "pinia";
import { ref, Ref } from "vue";

type CollectionState<T> = { count: number; items: Ref<T[]> };

export const collectionStoreFactory = <T extends { "v-id": string }>(
  name: string
) => {
  return defineStore(`${name}_collection`, {
    state: (): CollectionState<T> => ({
      count: 0,
      items: ref<T[]>([]) as Ref<T[]>,
    }),
    actions: {
      appendItem(item: T) {
        this.count++;
        this.items.push(item); // this.items: T[]
      },
    },
  });
};

I found a vuejs/core thread that is related to this problem: vuejs/core#2136

This does raise another question for me: Should arrays and objects inside a state be wrapped in ref()?

As far as I've been reading the official docs of Pinia, Vue, etc., and experimenting, ref uses reactive behind the scene, and exposes the writable value property, so a ref is a reactive, and if in a reactive you don't have to set arrays/objects as refs because it makes all the tree reactive, then I guess the answer to your question is NO.

I just built a codepen to confirm it.

I have a ref that is an object, and that object has an array 'items' and a 'text' property.

I type something in an input field, press a button, and the text is pushed in the items array, as an array and not as a ref of array.
It causes the template to render and all the items gets displayed. (Also tried with a ref of array and noted no difference,
because as per de docs, the ref object's nested refs get "unwrapped" automatically).

I went further and added a Quasar <q-popup-edit> component so I can edit the items in the list.
Then I finish editing the items and hit ENTER key, the items arrays gets updated and again, forces a render.

You can try it here: https://codepen.io/angelhdzmultimedia/pen/OJOWQqY

[angelhdzmultimedia]

I was wrong about ref using reactive behind the scenes.
But they are basically the same, they both have getters/setters, and trigger effects and track the properties to tell Vue to render.
ref is only different in that it exposes the value property.

https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue