Как связать передаваемую в компонент v-model с property внутри стора pinia?

Question

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

Принимаю v-model в компоненте

const passedModel = defineModel<SelectDefaultModel>('model')

Стор в pinia

export const useStore = ($id: StoreID) =>
  defineStore(`select/${$id}`, () => {
    const model = ref<SelectDefaultModel>(undefined)

    return {
      model,
    }
  })

Все на composition api, vue 3.5.

Пока все что пришло в голову - это watcher. Но мне показалось это слишком грязным решением. То есть, как я понял, мне нужно заменить не значение, а саму реактивную переменную ```model = ref()``` на то, что я принимаю через v-model.

Answer 1

[Чипекве]

defineModel нужна для двусторонней привязки модели из дочернего к родителю, а не для стора.

Для привязки к пинии достаточно привязать переменную из стора напрямую к v-model. Пиния не запрещает так делать.
Если нужно привязывать импортированную в родителе переменную пинии, то просто передать её в v-model дочернего, где есть переменная defineModelбез имени.

Можно через записываемый computed, как в ответе выше, но это скорее нужно при более сложной логике получения и установки.

Ну и самое классическое решение - в сторе сделать метод установки переменной, повесить его на обработчик в компоненте. А значение брать через :model-value

Comments

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

Спасибо.
То что можно привязать напрямую переменную из стора на v-model, передовая ее как этот самый v-model в дочерний я понимаю.
Проблема в том, что в реальности у меня это стор инпута, а инпутов много, от этого мне нужно разграничивать стор каждого инпута, уникальным id useId() в 3.5. И я получаю этот useId внутри самого компонента инпута при инициализации, для изолирования. Так что я не могу просто в родителе подставить переменную из стора, так как я не знаю порядковый номер стора.
Можно конечно через defineExpose отдавать id, но мне кажется грязным, так как в родителе придеться все это получать через useTemplateRef(''). Хотелось просто как с обычной v-model, навесить, получить, все.

[Чипекве]

Это какое-то странное решение - делать отдельный стор на инпут. Обычно сторы делаются на весь раздел, а то и на всё приложение. А инпуты и др. поля привязываются к соответствующим переменным нужного раздела.

Answer 2

[director-rentv]

const store = useStore(/* че там должно быть */)

const model = computed({
  get: () => store.model.value, // мб без .value, не помню, выворачивает пиния ref-ы или нет
  set: (value) => store.model.value = value
})