pinia icon indicating copy to clipboard operation
pinia copied to clipboard

Return type of storeToRefs doesn't match runtime result if values are nested computed values

Open henryliu-git opened this issue 1 month ago • 1 comments

Reproduction

https://play.pinia.vuejs.org/#eNqdVd1O2zAUfhUrN2ml1hliYhK0CJi42C7YBFzmJiSnqVliW7ZTilAvd7dH2F5uT7Jju3FSyApC6o9z/r7Pn31OnqJzKemqgeg4mulcMWmIBtNIUmW8nKeR0Wl0mnJWS6EMeSIGtLkxQgHZkIUSNYlpEmy34hoWmhodn/RSdOcKSZJxltmoXHCNkK7ivKs+GqMv5UlC/v7+SXJRy8ZAcU7MowTCNCYoxkufLiqglShHsatCQ3A88XU7y07RLM9ZAdxkVfV4hbhQfN7GXQSY1oLcZx4StRjA3FOLrrKqgcDl1UjP0bG0avTVa9VSVsl53zNy61c0G9gMebYbW7mTK1AfMo9PMNmj/flFDB5JU5ZIWL9XWPKwZPnSOhmSUgpyQzJNzBKIarhhNf6DbiqUpEVy8IyTRYaxDD8W3DQWmGQ7GAN4p3Ro8285ybcF+tOYJb6r8N7gg4FaVpkBfJph24SHaBL5dpnWmaT3WnDsx6eUE5JuHdiGx8RZrM21j7WkUeLWFHQ9vVPiQYPC/DSatKFn2NxJASsjRKWnmWQ+bWmM1MdJkhcc4wuo2EpRDibhsk5e5Jwd0SN6kFTsLkGghPEC1rswmDEtoH5L9Tb07AM9+Eg/uaqrw23R2la1RTcp36AsRuMZLVj5TBR7GVkF6ps0DM9wRxw8EfHw1dmMaiBQzJeQ/xiw3+u1Z/0d7xeoFfS2ZTJVgvHuy5srWOM6OGtRNBVG73FeA96vxnL0YRcNL5B2L86x/eLOGG/lrb5cG+C63ZQl6tRw8U5me83+t/WO7iE97Kv4YkKjlGFAt50dpjOi4GxWvRlewIJx2B387QzHOPuFtYv1I6p7Tcz7uaM4OLCPRmMyP0XymGzp+8xubs3Dum3Zkc+Isxibaydr38zp6mzze+8DYsfswEwamhftRi2qwnek4h13y2NbdNLZ9rAKURu3k83Y/kabfxlDqWo=

Steps to reproduce the bug

It happens if you accidentally created a nested computed values and use storeToRefs.

export const testStore = defineStore('testStore', () => {
    const computedA = computed<string>(() => 'a');
    const accidentallyNestedComputedB = computed(() => computedA); // type is ComputedRef<ComputedRef<string>>

    return {
      computedA,
      accidentallyNestedComputedB,
    };
})

const store = testStore();

// ✅ computedA type is string
console.log('store.computedA', store.computedA);

// ✅ accidentallyNestedComputedB type is ComputedRef<string>
console.log('store.accidentallyNestedComputedB.value', store.accidentallyNestedComputedB.value);


// test storeToRefs
const refs = storeToRefs(store);

// ✅ computedA type is ComputedRef<string> 
console.log('refs.computedA.value', refs.computedA.value); 

// ❌ ts suggests accidentallyNestedComputedB type is ComputedRef<string> which is incorrect as the runtime result suggests 
// in fact it is actually a ComputedRef<ComputedRef<string>>.
console.log('refs.accidentallyNestedComputedB.value', refs.accidentallyNestedComputedB.value);

Expected behavior

type of store.accidentallyNestedComputedB.value is ComputedRef<ComputedRef>

Actual behavior

type of store.accidentallyNestedComputedB.value is ComputedRef which doesn't match runtime result.

Additional information

No response

henryliu-git avatar Apr 27 '24 16:04 henryliu-git

I added a PR to address this issue #2659

quiteeasy avatar Apr 29 '24 18:04 quiteeasy