Problem with types with ts, useStorage (vueuse) and Pinia-CodePudding

I'm getting a weird error in the following code: Property 'length' does not exist on type '{ [RefSymbol]: true; }'.

But when I check the type of foo in the getCount function my IDE tels me its of type Foo[]. What am I doing wrong?

import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';

interface Foo {}

export const useFooStore = defineStore('foo', {
  state: () => ({
    foo: useStorage('foo', [] as Foo[]),
  }),
  actions: {
    getCount() {
      return this.foo.length; //Here's the error
    },
  },
});

CodePudding user response：

Now there is not very much info in your post but from what the error message says I'd guess the following. You are defining an object with the type

{ [RefSymbol]: true; }

but as length does not exist on your type I think an array is beeing expected for jobs?

CodePudding user response：

I think the return value of useStorage isn't what you think. I believe it returns a ref, of sorts, with a value property that contains the actual data being stored.

Try:

useStorage('jobs', [] as Job[]).value