pinia
pinia copied to clipboard
Return type of storeToRefs doesn't match runtime result if values are nested computed values
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
Additional information
No response
I added a PR to address this issue #2659