Using a Class to declare all getters and actions

[dominicmeyer]

Hi, I wanna declare a store like this and use the methods of the class, without writing it manually again.
This would useful, to use Inheritance and Interfaces for the return values.
The example below isn't working, is there another way of doing this?

export const useTestStore = defineStore("test", () => {
    const testCollection = ref(new TestCollection())

    return {
        ...testCollection
    }
})

export class TestCollection {
    test() {console.log("Hello World!")}
}

Some Component:

const testStore = useTestStore()
testStore.test()

[angelhdzdev]

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

export class TestCollection {
  public logs: string[] = []
  public message: string = ''

  public test(): void {
    this.logs.push(this.message)
    this.message = ''
  }

  public clear(): void {
    this.logs = []
  }
}

export const useTestStore = defineStore('test', () => {
  const testCollection = new TestCollection()

  return {
    testCollection,
  }
})

Usage

const {testCollection} = useTestStore()

testCollection.test()
testCollection.clear()

You can't destructure a ref or it loses reactivity.
And considering pinia will make the instance of TestCollection reactive, no need for the ref.

[DJ-caddev]

Hello, I'm stuck in a similar case, but I am using Setup-Stores syntax, so I need to use refs. I have trouble storing full object data.

class SuperClass {
  private init: boolean = false;

  public constructor() {
    this.init = true;
  }

  public get isInit(): boolean {
    return this.init;
  }
}

interface ExposedState {
  test: Ref<SuperClass[]>;
}

export const getViewerDataStore = defineStore<'ViewerData', ExposedState>('ViewerData', () => {
  const test = ref<SuperClass[]>([]);

  return {
    test,
  };
}

I have a TypeScript error with this code, saying that ExposedState and the return type of getViewerDataStore are not compatible with each other. The weird thing is that test has an automatically inferred type:

const test: Ref<{
    readonly isInit: boolean;
}[]>

Do you have any clue of what I'm doing wrong?
Thank you!

[angelhdzdev]

Apparently is a problem with private field init.

The TypeScript error was:

Type 'Ref<{ readonly isInit: boolean; }[]>' is not assignable to type 'Ref<SuperClass[]>'.
Type '{ readonly isInit: boolean; }[]' is not assignable to type 'SuperClass[]'.
Property 'init' is missing in type '{ readonly isInit: boolean; }' but required in type 'SuperClass'.

And I figured it out because I used an explicit type on the test constant:

const test: Ref<SuperClass[]> = ref<SuperClass[]>([])

So that helped me reach the conclusion that init, as it's private, needs to be set as optional with the ? symbol.

chrome_ZGj0qeaZWI.mp4

Hope this solves your problem.

[DJ-caddev]

You are awesome! Thank you for the answer. 😊