Add `stateToRefs` helper

What problem is this solving

If a store exposes lots of getters and state properties then extracting them is a little bit messy and repetitive:

import { computed } from "@vue/composition-api";
import useStore from "./useStore";

setup () {
  const store = useStore();

  return {
    isLoading: computed(() => store.isLoading),
    count: computed(() => store.count),
    items: computed(() => store.items),
    user: computed(() => store.user),
    settings: computed(() => store.settings),
    // ...and so on
    add: store.add,
    update: store.update,
    delete: store.delete,
  };
}

I suggest adding a stateToRefs helper that would only convert stat properties and getters to reactive refs. I’m not sure about the name of this helper, stateToRefs isn’t probably the best because one might think it would only convert state properties, but at the moment I have no idea for a more generic name that would work for both: getters and state.

Proposed solution

import { stateToRefs } from "pinia";
import useStore from "./useStore";

setup () {
  const store = useStore();
  // stateToRefs would only convert getters and state properties
  const { isLoading, count,items, user, settings } = stateToRefs(store)

  return {
    isLoading,
    count,
    items,
    user,
    settings,
    add: store.add,
    update: store.update,
    delete: store.delete,
  };
}

Describe alternatives you’ve considered

We can do:

import { toRefs } from "@vue/composition-api";
import useStore from "./useStore";

setup () {
  const store = useStore();
  const { isLoading, count, items, user, settings } = toRefs(store)

  return {
    isLoading,
    count,
    items,
    user,
    settings,
    add: store.add,
    update: store.update,
    delete: store.delete,
  };
}

But this isn’t optimal because it not only converts getters and state to refs, but also wraps in refs all built-in methods (like $reset) and all actions.

[wujekbogdan]

• use toRefs(store.$state) to get all state properties as refs

Thanks for the tip. I didn’t think of using this property. If getters were also exposed this way then we could do:

const store = useStore();

const { items, isLoading } = toRefs({
  ...store.$getters,
  ...store.$state,
})

If this can be added while being fully tree shakeable, I think this could be really useful. But let’s give it more time to think about API alternatives that take care of getters, properties added by plugins, and actions.

Another alternative to a stateToRefs helper would be adding $asRefs property to store. e.g.:

const store = useStore();
const { myGetter } = store.$asRefs.getters;
const { myProp } = store.$asRefs.state

Where store.$asRefs.getters would be getters converted to refs and store.$asRefs.state would be state converted to refs.

Or maybe even better:

const store = useStore();
const { myGetter, myProp } = store.$asRefs;

Where store.$asRefs would be both: getters and state converted to refs.

In order to avoid unnecessary overhead these properties could utilize Proxies that would wrap properties in refs on demand (when they are accessed rather than when they are created)

---

If it was up to me I would rather go for a standalone stateToRefs helper because it imitates the way how Vue 3 toRefs works, so it would be probably easier to understand and feel more natural for people who already know Composition API.

[posva]

What about a function storeToRefs() that transform all state and getters of a store to refs? This avoids spread operations and is tree shakable. It also extracts properties added by plugins:

const store = useStore()
const { myProp, myGetter, myPluginRef } = storeToRefs(store)

Naming it stateToRefs() would be misleading since it also transfer getters

For setup stores, this would retrieve any reactive source (ref, reactive, customRef, computed).