Error with storeToRefs in Vue 2

[Djaler]

Reproduction

https://github.com/Djaler/pinia-vue-2-store-to-refs

Steps to reproduce the behavior

1. npm install
2. npm run dev
3. Open in browser

Expected behavior

Two numbers displayed beside a button.

Actual behavior

Value, created using storeToRefs is undefined

Additional information

If we debug storeToRefs function, we'll see that store['counter'] is just a plain number, not a ref.

[posva]

This is because of vuejs/composition-api#844, use toRefs() as a workaround for the moment.

[wujekbogdan]

If this is an issue on Vue end, and it won't work until this bug is fixed, then it would be great to update Pinia docs so that people are not expecting this feature to work with Vue 2.x

[Sjoerd82]

This is because of vuejs/composition-api#844, use toRefs() as a workaround for the moment.

Does not solve the issue for me, or I'm doing it wrong. Are you saying to simply replace storeToRefs with toRefs? Cause that still gives me an undefined.

[posva]

For the moment, I think the best is to add a runtime dev-only warning if the user is using Vue 2 that says this feature is not supported, recommend them to use toRefs() instead and link to this issue. This should be a good first issue if anybody wants to pick it up!

[wujekbogdan]

That's a good idea.

[a573367014]

Can we use other ways to avoid it first?

function storeToRefs(store) {
    store = toRaw(store);
    const refs = {};
    for (const key in store) {
        const value = store[key];
        if (isRef(value) || isReactive(value)) {
            // @ts-expect-error: the key is state or getter
            refs[key] =
                // ---
                toRef(store, key);
        }
        else if(key in store.$state) {
            refs[key] = computed(() => store[key])
        }
    }
    return refs;
}

[zhanglolo]

Can we use other ways to avoid it first?

function storeToRefs(store) {
    store = toRaw(store);
    const refs = {};
    for (const key in store) {
        const value = store[key];
        if (isRef(value) || isReactive(value)) {
            // @ts-expect-error: the key is state or getter
            refs[key] =
                // ---
                toRef(store, key);
        }
        else if(key in store.$state) {
            refs[key] = computed(() => store[key])
        }
    }
    return refs;
}

work well with store which defined by use function(setup style)?