Как подружить 1 стор Pinia с разными инстансами одного и того же виджета?

Question

[Артем Прохоров]

const useStore = ($id: string) =>  defineStore(`input/$id`,  () => {
const value = shallowRef('')
const props = ref({})

return {value, props}
})

Кодом выше можно дифференцировать один и тот же стор (его переменные, функции и тд) на один и тот же компонент (в данном примере инпут), который вызывается к примеру больше 1 раза в коде. 2 раза вызвали инпут в разметке, значит это 2 разных инпута и каждого есть свое независимое состояние (v-model тот же).
Проблема тут в том, что такой подход сьедает много памяти, так как каждый инстанс стора сам по себе не маленький.
Каким образом можно сохранить дифференциацию, но при этом в рамках одного стора (вот так defineStore(`input`, () => {...}))?

Comments

[Константин Б.]

Зачем инупуту стор? Сделайте обычную композицию

Answer 1

[Андрей]

Pinia не очень удобна, если вы хотите делать на основе нее фабрики, единственный правильный способ работы со стором - создавать внутри состояния, функции и возвращать их. Также надо помнить, что все созданные сторы Pinia живут вплоть до закрытия вкладки и занимают память.

Как вариант, можно попробовать подобную реализацию

interface InputState {
  value: Ref<string>;
  props: object;
}

const useStore = defineStore(`inputs`,  () => {
  const inputs = new Map<string, InputState>();

  function defineInput(id: string, value: Ref<string>, props = {}) {
    inputs.set(id, { value, props });
  }

  return { inputs, defineInput };
})

В качестве альтернативы Pinia можно посмотреть на композаблы из vueuse: createGlobalState и createInjectionState. Первый практически полный аналог Pinia, но более легковесный, второй позволяет создавать глобальное состояние только на поддерево компонентов и не будет занимать память, если это состояние не нужно.

P.S. задачу вы не озвучили, но почти наверняка, как вам уже написали, Pinia вам не нужна

Comments

[Артем Прохоров]

Уточнить хочу. Если сделать так (для уничтожения pinia стора)

store?.$dispose()
if (getActivePinia()) delete getActivePinia().state.value[store.$id]

стор ведь перестанет занимать память и до закрытия вкладки, верно?

А так спасибо, сам к вашему же решению и пришел с ```defineInput```.