Правильная взаимосвязь между компонентами?

Question

[kiranananda]

Здравствуйте!

Есть у меня корневой компонент, например print-form. В этом компоненте вложен компонент для отрисовки табов, далее вложен компонент для отрисовки списка полей в одном табе, далее компонент объединяющий разные типы ввода данных(input). Ну и на последок обертки над input-ами. В родительском компоненте я через пропсы передаю массив табов и описания полей. И далее в каждом компонент в дочерний передается частичка этого массива..
Но вот теперь встала задача отправить форму по Ajax . То есть мне нужно получить все значения value в одном массив и его уже отправить. Так вот как правильно реализовать структуру такого уровня вложенности и иметь возможность получить значения value конечных элементов?

Answer 1

[Aleksey Solovyev]

Удобно использовать store. Во vue есть Vuex
Сохраняйте данные в store:
this.$store.commit('setData', data);
После чего можно получить доступ к этим данным из любого компонента:

import { mapGetters } from 'vuex';

// code...
computed: {
  ...mapGetters({
    data: 'getData', 
  }),
},

Данные реактивны.

ps есть удобный способ разделения на модули(user, global etc)

Comments

[kiranananda]

Спасибо!
я тоже на него думаю, но вот как с точки зрения кода реализовать все. Сейчас у меня передается один параметр Field . Что бы мне исключить возможные коллизии с другой формой, я так полагаю, надо либо для разных типов данных, либо индекс в массиве, который будет указывать на принадлежность именно к этой форме... И опять же мне нужно еще через один параметр передать это значение через кучу промежуточных компонентов к последнему, который при изменении и изменит значение в нужном мне хранилище?
Или есть какие то более изящные решения?

[Aleksey Solovyev]

Оч много букв, которые бестолковые

spoiler

Вообще не понял(мб я туплю)...
Пусть будет структура проект:

Main Component:
--Component A
----Component Aa
------Component AaN
----Component Ab
----Component Ac
--Component B

Добавим хранилище:

const store = new Vuex.Store({
  modules: {
    forms: Forms,
  },
});

Добавим модуль Forms

const Forms = {
  state: {
    // лучше объект 1 создать или массив и туда сунуть все формы
    formUno: {
      name: 'Some name',
      suname: 'some surname',
    },
    formDos: {
      email: '[e-mail]'
    },
  },
  getters: {
    getFormUno: state => state.formUno,
    getFormDos: state => state.formDos,
  },
  mutations: {
    setFormUno(state, formData) {
      state.formUno = formData;
    },
    setFormUnoName(state, name) {
      state.formUno.name = name;
    },
    setFormDos(state, formData) {
      state.formDos = formData;
    },
  },
};

В компоненте Component Aa сохраняем только имя:
this.$store.commit('setFormUnoName', inputValue);
В компоненте Component AaN получим имя поменяем его и сохраним его обратно:

computed: {
  ...mapGetters({
    formUnoData: 'getFormUno', 
  }),
},


this.$store.commit('setFormUnoName', this.formUnoData.name.toUpperCase());

В компоненте Component Ab сохраняем форму formDos:
this.$store.commit('setFormDos', dataObj);

Так же получаем нужные нам данные в любом компоненте:

computed: {
  ...mapGetters({
    formUnoData: 'getFormUno', 
    formDosData: 'getFormDos', 
  }),
},
// const formUno = this.formUnoData;
// const formDos = this.formDosData;
// <div>{{formUnoData}}</div>
// <div>{{formDosData}}</div>

Какие коллизии могу тут быть? Вы четко сохраняете данные куда Вам нужно(можно сравнить так:

const formDos = dataObj;
// same shit
this.$store.commit('setFormDos', dataObj);

). И так же получаете откуда Вам нужно.
Если нужен еще какой-то параметр, то создаете еще какой-то state с сеттером и геттером:

state: {
  .....
  anotherState: ''
}

Что имеем на выходе: нам все равно какая структура проекта. Мы имеем доступ к сеттерам и геттерам в каждом компоненте. У нас нет путаницы с данными(1 геттер = 1 данные). Мы можем легко расширяться и нам не надо будет для этого менять в каждой компоненте код. Всего лишь добавить новый state.

[kiranananda]

Так это все так. Только вот у меня есть грубо говоря обертки на input. Его может использовать как одна форма так и другая. А сохранение в хранилище находиться именно в этой в обертке. Что бы я выставил нужный state надо передать в конечный компонет какую мутацию использовать. Отсюда вижу один глупый выход, во всех компонентах сделать пропс например state.
У меня просто функционал этой формы может быть использован как в формах поиска так в добавлении чего либо и не исключено, что в дальнейшем может получиться так, что на странице имеется не одна форма...

[Aleksey Solovyev]

Хм... сорри... теперь понял Вашу проблему:

Создадим свое событие, которое будем слушать у родителя.
Для этого в компоненте CustomInputField у Вас есть v-model="value"
Вешаете событие v-on:change="inputUpdate" на поле input

<template>
  <div class="input">
    <input v-model="value" v-on:change="inputUpdate">
  </div>
</template>

Добавим метод inputUpdate:

methods: {
  inputUpdate() {
    this.$emit('inputUpdate', this.value);
  },
},

Теперь у "родителя" слушаем inputUpdate:

<template>
  <div id="block">
    <custom-input-field @inputUpdate="(data) => { fieldUno = data }"/>
    <custom-input-field @inputUpdate="(data) => { fieldDos = data }"/>
    <custom-input-field @inputUpdate="(data) => { fieldTres = data }"/>
  </div>
</template>

где fieldUno, fieldDos, fieldTres это данные компонента родителя:

data() {
  return {
    fieldUno: '',
    fieldDos: '',
    fieldTres: '',
  };
},

[kiranananda]

Наверное я как то не так объясняю :)

Компоненты с вложенностью
хтмл по верх формы
- форма с функционалом сабмит и тп...
- - Компонент табов
- - - Компонент отображения списка полей( для каждого таба вызывается )
- - - - Хтмл обертка для поля (ее конечно можно перенести в предыдущий компонент)
- - - - - Агрегатор всех полей (field)
- - - - - - А тут уже идут обертки на input textarea и тп...
Если бы это была одна форма, проблем, нет, засовываем в хранилище и все.
Но этот же самый функционал используют и другие формы на странице, которые тоже могут быть в данный момент активны.
Вот простой пример, у меня можно файлы аплоадить, а потом у них менять свойства, формочка открывается в попапе, она тоже использует много компонентов из той цепочки, что я описал выше, но ее данные должны быть в другом массиве в хранилище. По идее эти данные должны придти с компонентов верхнего уровня ибо они знают, что и какая форма открыта, а вот начиная с "Компонент отображения списка полей( для каждого таба вызывается )" он уже может использоваться в разных формах, не говоря о нижестоящих компонентах ... А с низов долбиться наверх через emit это не известно куда попадешь :)..

Может у меня просто структура корявая какая. По факту получаю данные из php и мне надо нарисовать форму, потом ее отправить и делов то :). А поскольку что бы не плодить повторный код, разбил все на кучу компонентов, что бы в других формах использовать по другому...

По сути в конечном компоненте я v-model не использовал, просто туда массив с полями передается и все. Сейчас как раз в поиске решения как лучше тут поступить...

[Aleksey Solovyev]

Во всяком случае, я попытался... :) Надеюсь у Вас получится найти удачное решение проблемы, которую я так и не понял))!

[kiranananda]

Aleksey Solovyev спасибо за помощь, может нужно что бы просто прошло время и все переварилось :).