Юзаю стор для сохранения состояния форм, т.к. есть табы с использованием vue-routing
Есть store pinia
export const useStore = defineStore('store' ,() => {
const forms = ref([])
const addForm = (form) => forms.value.push(form)
const getFormById = (id, type) => forms.value.find( (form) => {
return form.id === id && form.type === type
} )
})
Есть компонент
const props = defineProps({ id: Number, formType: String })
const { id, formType } = toRefs(props)
const store = useStore()
const { addForm, getFormById } =store
const form = ref({})
const formId = computed(() => {
return formType.value + '-' + id.value
})
const initForm = () => {
// Ищет форму по id и типу из пропсов используя getFormById (Написал все только что в реале нейминг другой)
// Возвращает эту форму из стора или создает новую и добавляет в стор через функцию addForm
}
onMounted(() => {
form.value = initForm()
})
watch(formId, (newFormId) => {
form.value = initForm()
})
Соответственно в компоненте уже мутируем получаемый объект.
Все работает. Любая операция с полученным объектом влияет и на стор и вызывает все реактивные состовляющие.
Но есть ощущение, что так делать нельзя, а альтернатив пока не придумал.