Could a feature (autoToRef) be implemented to automatically return (toRefs) when destructuring the state?

[danielpaz98]

What problem is this solving

I actually came up with this because it is a bit annoying to add storeToRefs to each store if you want to destructuring

Proposed solution

I'm very new to this, it's the first time I do it, and while I was thinking how it could be implemented I found a repository where this function is better explained, I don't know if I can put the link?

[posva]

One or multiple example would help understand what you want by auto refs and also if it's technically possible or not. Also note that you don't need to use storeToRefs(), you can use the store directly as a whole

[danielpaz98]

what I meant was that it's a bit annoying to import all the time storeToRefs, what I mean would be this:

import { useMainStore } from "~/stores/mainStore";
import { storeToRefs } from "pinia";

const mainStore = useMainStore();
const { foo, bar } = storeToRefs(mainStore);

I think if there was an option (autoToRef) where I could decide if I want the storeToRefs to be done automatically when the store is destructuring that would be great.

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

const pinia = createPinia({
  autoToRef: true,
});

const app = createApp(App);
app.use(pinia);
app.mount("#app");

then I would only have to do:

import { useMainStore } from "~/stores/mainStore";
const { foo, bar } = useMainStore();

maybe this package will help you to better understand the idea, I repeat I am a newbie, it is just an idea, but not a bad one.
https://www.npmjs.com/package/vue-banque

[posva]

Maybe this is possible with a vite plugin and I'm open to adding it to the main repo but I don't have the bandwidth to do it.

Another solution is to create your own defineStore() wrapper that calls storeToRefs() on the resulting store when passing an argument (to still enable extracting actions). Or even better a custom version that allows destructuring anything.

I think that last version is the most interesting one

[alijuniorbr]

Could someone exemplify how would be this custom function that would allow to destructure anything?

[vieruuuu]

this is my solution to this:

store example:

import { defineStore } from "pinia";

const store = defineStore("global", {
  state: () => ({
    previousRoute: "",
  }),
});

export default store;

@helpers/pinia-auto-refs.js

import { storeToRefs } from "pinia";

const storeFiles = import.meta.globEager("./../store/*.js");

let storeExports = {};

for (const fileName in storeFiles) {
  const { default: storeObject } = storeFiles[fileName];

  storeExports[storeObject.$id] = storeObject;
}

export function useStore(storeName = "global") {
  if (!Object.keys(storeExports).includes(storeName)) {
    throw "Unknown pinia store name: " + storeName;
  }

  const store = storeExports[storeName]();
  const storeRefs = storeToRefs(store);

  return { ...store, ...storeRefs };
}

and unplugin autoimports config:

{
  dts: "auto-imports.d.ts",
  include: [
    /\.vue$/,
    /\.vue\?vue/, // .vue
  ],
  imports: [
    // presets
    "vue",
    "vue-router",
    {
      "@helpers/pinia-auto-refs.js": ["useStore"],
    },
  ],
}

add unplugin to vite config plugins:

import unpluginAutoImport from "unplugin-auto-import/vite";

//..

plugins: [
      // ...
      unpluginAutoImport(unpluginAutoImportConfig),
     // ...
]

example usage:

const { statePropExample, getterExample, actionExample } = useStore("storeName");
// leave useStore() to access to store named global -> useStore("globall")

pros:

• easy to use

cons:

• no intelisense

[vieruuuu]

I have an alternative for my useStore function that has intelisense support

// defineRefStore.js
import { defineStore, storeToRefs } from "pinia";

export function defineRefStore(id, storeSetup, options) {
  const piniaStore = defineStore(id, storeSetup, options);

  return () => {
    const usedPiniaStore = piniaStore();

    const storeRefs = storeToRefs(usedPiniaStore);

    return { ...usedPiniaStore, ...storeRefs };
  };
}

also a d.ts file for intelisense

// defineRefStore.d.ts
import {
  DefineSetupStoreOptions,
  _ExtractStateFromSetupStore,
  _ExtractGettersFromSetupStore,
  _ExtractActionsFromSetupStore,
  Store,
  PiniaCustomStateProperties,
} from "pinia";

import { ToRefs } from "vue-demi";

export declare function defineRefStore<Id extends string, SS>(
  id: Id,
  storeSetup: () => SS,
  options?: DefineSetupStoreOptions<
    Id,
    _ExtractStateFromSetupStore<SS>,
    _ExtractGettersFromSetupStore<SS>,
    _ExtractActionsFromSetupStore<SS>
  >
): () => Store<
  Id,
  _ExtractStateFromSetupStore<null>,
  _ExtractGettersFromSetupStore<null>,
  _ExtractActionsFromSetupStore<SS>
> &
  ToRefs<
    _ExtractStateFromSetupStore<SS> &
      _ExtractGettersFromSetupStore<SS> &
      PiniaCustomStateProperties<_ExtractStateFromSetupStore<SS>>
  >;

now when defining stores just use defineRefStore instead of defineStore from pinia

example:

import { defineRefStore } from "./defineRefStore.js";

import { ref, computed } from "vue";

export const useCartStore = defineRefStore("cart", () => {
  const products = ref([]);

  return { products };
});

NOTE I WROTE THIS FUNCTION ONLY FOR SETUP STORES

[Allen-1998]

Hi，I implemented ts version based on your idea.And publish it as a Vite plugin.I used it in one of my projects and it worked fine and looked fine.It's easy to use and has intelisense.

plugin: pinia-auto-refs
playground

[douglasg14b]

Couldn't this be done as a helper of sorts?

const warehouseStore = useWarehouseState();
const { setWarehouseState } = warehouseStore;
const { warehouse, resourceVolume } = storeToRefs(warehouseStore);

As an example, this is quite annoying.

Couldn't this be wrapped up into a helper function that returns a combined object to the effect of:

// Contrived example, but internally the helper would do something similar?
function someHelper() {
    const warehouseStore = useWarehouseState();
    const { setWarehouseState } = warehouseStore;
    const { warehouse, resourceVolume } = storeToRefs(warehouseStore);

    return {
        setWarehouseState,
        warehouse,
        resourceVolume
    };
}

Which we could then use as:

const { warehouse, resourceVolume, setWarehouseState } = someHelper(useWarehouseState());

Or does this just end up breaking things?