Passing arguments to useStore()?

[nerdcave]

I occasionally need to pass arguments to my stores but haven't been able to determine if it's possible in Pinia. Is it possible to do something like this, or a feature to consider? Or is this not a sensible thing to do?

const selectedId = ref(0)
useStore(selectedId) // pass arguments

defineStore('id', (selectedId) => {
  const state = ref()
  watch([state, selectedId], () => { ... })

  return { state }
})

[posva]

I usually add an action and calling upon creation because having it as an argument could be misleading as it's only used if the store created that time

const store = useStore()
store.init(arguments)

[nerdcave]

Sorry, I don't understand what you mean. What would an action do in this scenario?

[posva]

Yeah, sorry, I updated with a code snippet to make it clearer.

What are the real-world scenarios of adding arguments to the first creation of the store?

[nerdcave]

Using store.init(arguments) wouldn't allow having multiple store instances with different arguments though, right? Maybe that's the point, Pinia is intentionally designed to not accommodate multiple store instances?

What are the real-world scenarios of adding arguments to the first creation of the store?

Simplified example:

defineStore('id', () => {
  const selected = ref(false)
  function select() {
    emit('before-selected') // need access to emit
    // ...
    selected.value = true
  }
  return { select }
})

// Component A:
setup(_, { emit }) {
  const store = useStore(emit)
}

// Component B:
setup(_, { emit }) {
  const store = useStore(emit)
}

Using store.init(emit) would not work in this case because Component B's emit would override component A's.

[posva]

ah yeah, those are two different stores, you need a factory function for that:

export function useStore(id: string, emit) {
  return defineStore(id, () => {
    // use emit
  })()
}

But this doesn't seem like a good idea for stores. You could rather store the different need in a Map inside one store and remove them when the component is unmounted

[nerdcave]

Yeah, I see what you're saying. It seems like there should be a straightforward way to pass in arguments but I understand why it's complicated. Thanks for the discussion.

[noachianark]

I used this way.

1. define store in store.ts

export const useStore = defineStore({
id: "store",
state: ()=>({
parameter: any
}),
actions:{
init(parameter: any){
this.parameter = parameter
return this;
},
someFunction(){
// here use the parameter do something...
this.parameter
}
}
})

2. use store in component:

const store = useStore().init(parameter);
store.someFunction();

Don't know if this is the right way to use pinia.

[nerdcave]

Thanks, that's what @posva suggested above so I think it's an accepted pattern. It just doesn't work if you want to create the store multiple times with different parameters.

[EliphazBouye]

@noachianark Thanks I tried your way it works !! 👍🏾

[pungfen]

Hello, is there a solution to this problem? I have the same problem now

[nerdcave]

Pinia doesn't seem to support this, you'll have to implement your own solution.

[Alosies]

If you are looking to have the same store functionality but different arguments each time and you want multiple instances of those store to be active at the same time, As @posva suggested, you need to create a factory function that takes the arguments and returns the defineStore function with those specific set of arguments. You might also have to pass a different id to distinguish your store instances.

[gllinzbk1]

I created pinia through factory mode, but when crossing components, I cannot retrieve the store through ID

[drbarto]

@gllinzbk1 take a look here: #840 (reply in thread)
I don't use exactly this code, but a similar implementation, and it works very nicely for me.

BTW I find it unfortunate that this approach (having multiple instances of the same store based on some input parameters) is not an explicitly suggested concept of pinia. Managing multiple distinct data sets inside a store with a Map (as suggested by Eduardo) works to some degree, but adds complexity to the store and makes it hard to use multiple such stores side by side.

[Kcko]

My workaround for setup options.

One storage for all ...

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
    function increment() {
        count.value++;
    }

    return { count, increment };
});

Dynamic storage = each components get its own

export function useCounterStore(key) {
    return defineStore(key, () => {
        const count = ref(0);
        function increment() {
            count.value++;
        }

        return { count, increment };
    })();
}

And more ES6 style

export const useCounterStore = key => defineStore(key, () => {
    const count = ref(0);
    const increment = () => {
        count.value++;
    };

    return { count, increment };
})();

I really don't understand that it's not thought of from the beginning and it's nowhere in the documentation.