Как обновлять данные между компонентами?

Question

[Devero97]

У меня есть 2 компонента. Первый завязан на создании и обновлении. Тоесть при создании я отправляю данные (все данные должны быть пусты), но при обновлении (переиспользую этот компонент) я подставляю данные, которые я получил. Просто операторами сравнения. Если у меня есть данные, то я использую их (это обновление), если данных нет, то я использую пустую строку.
Например

data() {
return {
          title: '' || this.data.title,
          value: null || this.data.tags,
  }
}

Вот в дочерний компонент я хочу передать либо пустой массив, либо уже массив с данными.
В родительском компоненте я получаю данные из дочернего при выборе из списка.
Соответственно добавляю их в родительский список.
Запутанно, конечно.
Тоесть мне нужно в зависимости от создания или обновления, родительский компонент использовал либо пустой массив либо массив уже с заполненными данными из дочернего компонента, но если я при обновлении хочу еще добавить данных, то они отражались при сохранении в родительском и при очередном обновлении я хочу видеть уже дополненный список.

Answer 1

[Алексей]

Хранить данные в сторе(Vuex) и получать их через mapState где нужно и после заполнения просто обновлять их через мутацию?

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

Comments

[Devero97]

Буду пробовать. Скажите, может подскажете как лучше организовать передачу данных и подписываться на них? У меня есть большой список данных, который необходимо заполнить в админке, а затем отправить на бек. У меня в дате получилось так:

data() {
        return {
          title: '',
          value: null,
          options: this.tags,
          checkbox: false,
          refLink: '',
          videoLink: '',
          shortText: '',
          summ: '',
          srock: '',
          stavka: '',
          doc: '',
          age: '',
          identif: '',
          job: '',
          pereplata: '',
          prodlenie: '',
          ki: '',
          conditionOne: '',
          conditionTwo: '',
          conditionTree: '',
          conditionFour: '',
          conditionFive: '',
          conditionSix: '',
          prevOne: '',
          prevTwo: '',
          prevThree: '',
          tabOne: '',
          tabTwo: '',
          tabThree: '',
          tabFour: '',
          tabFive: '',
          tabSix: '',
          htmlText: '',
          blockFive: ['','','',''],
          images: []
        }
    },

Можно его как-то улучшить? Если я беру его в объект, то данные не реактивны при изменении

[Алексей]

Devero97, а какие из этих данных должны быть реактивны? Т.е. на их изменения должны реагировать компоненты. Если просто эти данные положить в стор, то они всегда будут отдавать валидные данные. В компонентах получение из стора делать в computed и тоже будут все данные актуальны)

[Devero97]

Алексей, Они все реактивны. Я их все заполняю. При обновлении карточки, я просто в mount хуке заполняю их данными, которые передаю в props, если они есть. Дело в том, что я хотел бы их в объект запихнуть. Чтобы было нормально обрабатывать на бекенде их. Не хочется городить кучу свойств везде.
По поводу стора. Вы хотите чтобы я положил все данные в стор просто как обычный поля стейта и потом в компоненте реагировать не на данные даты, а на стейт? А как мне при отправке сохранять данные? Куда я буду сохранять их? Сейчас я имею поля в дате и при отправке я сохраняю в объект и передаю их на сервер. А как заполнить в стейт данные через v-modal?

[Devero97]

Алексей, Дак и в мутации мне нужно будет просто добавлять кучу таких же свойств и присваивать payload

[Алексей]

Devero97, у вас есть компонент формы в котором инпуты связаны с переменными в дата через v-model. На сабмит формы вешается функция в которой делаете валидацию(если нужно) и потом вызываете action из Vuex( this.$store.dispatch('module/actionName', objectWithData)). И в хранилище сохраняете эти данные (по полям\в один объект). Дальше уже отправляйте на бэкэнд, как вам угодно

[Devero97]

Алексей, Возмжоно не понял про оббъект. Я делю их на несколько объектов. Допустим 5 свойств я размещаю в объект и так далее. При заполнении они реактивны, но при присваивании существующих свойств, они становятся не реактивны. Когда тупо беру присваиваю объект из стора допустим, в date() объекту.

[Devero97]

Алексей, Я так и делаю. Но если я хочу изменить данные, обновить их. При переходе я использую тот же компонент что и при создании с этими же данными. Мне нужно получить уже заполненные данные что я и сделал при создании. Но как мне уже существующие данные изменить и сохранить?
Если реализовать через vuex, то я буду через state in computed свойствах получать данные и подставлять их в инпуты. Если я создаю карточку, то поле будет пустое в стейте и в инпуте будет пусто. Но если я использщую стейт, то я с data() не работаю же. Я должен изменять все уже в state. Я не смогу передать данные при сабмите формы. Тоже самое при обновлении карточки, если я получаю заполненные данные, то как мне с помощью v-modal изменить поле в computed свойстве и как потом сохранить и передать в state?

[Devero97]

Алексей, Или Вы предлагаете сохранить свойства в data() и подставлять туда данные из стейт?

[Алексей]

Devero97, есть пример кода? сложно понимать логику)

[Devero97]

Алексей,
Пропс change меняет при диспатче строку. Либо вызывает экшин create or update. Соответственно вызываются разные запросы

<template>
<div>
// Тут интупы с v-modal
// ....

// Компонент который загружает картинки при выборе и отправляет в 
// родительский компонент массив с именами картинок. А при обновлении 
// карточки передается этот же массив в компонент для отображения имени 
// картинки загруженной
<upload-image @images="getImages" :images="images"></upload-image>

// Кнопка сабмит
// btn 

</div>
</template>

<script>
export default {
    props: {
      change: {
        type: String,
        required: true
      },
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        id: '',
        title: '',
        value: null,
        options: this.tags,
        checkbox: false,
        refLink: '',
        videoLink: '',
        shortText: '',
        summ: '',
        srock: '',
        stavka: '',
        doc: '',
        age: '',
        identif: '',
        job: '',
        pereplata: '',
        prodlenie: '',
        ki: '',
        conditionOne: '',
        conditionTwo: '',
        conditionTree: '',
        conditionFour: '',
        conditionFive: '',
        conditionSix: '',
        prevOne: '',
        prevTwo: '',
        prevThree: '',
        tabOne: '',
        tabTwo: '',
        tabThree: '',
        tabFour: '',
        tabFive: '',
        tabSix: '',
        htmlText: '',
        blockFive: ['','','',''],
        images: []
      }
    },
    async fetch() {
        this.options = await this.$store.dispatch('tag/getAllTagsAdmin')
    },
    mounted() {
      if(this.data) {
        this.id = this.data._id,
        this.images = this.data.images,
        this.title = this.data.title
      }
    },
    methods: {
        async onSubmit() {
          let tags = this.value.map(item => item)
          try {
            const formData = {
              id: this.id,
              tags: tags,
              title: this.title,
              premium: this.checkbox,
              htmlText: this.htmlText,
              images: this.images,
              refLink: this.refLink,
              videoLink: this.videoLink,
              shortText: this.shortText,
              summ: this.summ,
              srock: this.srock,
              stavka: this.stavka,
              doc: this.doc,
              age: this.age,
              identif: this.identif,
              job: this.job,
              pereplata: this.pereplata,
              prodlenie: this.prodlenie,
              ki: this.ki,
              conditionOne: this.conditionOne,
              conditionTwo: this.conditionTwo,
              conditionTree: this.conditionTree,
              conditionFour: this.conditionFour,
              conditionFive: this.conditionFive,
              conditionSix: this.conditionSix,
              prevOne: this.prevOne,
              prevTwo: this.prevTwo,
              prevThree: this.prevThree,
              tabOne: this.tabOne,
              tabTwo: this.tabTwo,
              tabThree: this.tabThree,
              tabFour: this.tabFour,
              tabFive: this.tabFive,
              tabSix: this.tabSix,
              blockFive: this.blockFive
            }
            await this.$store.dispatch(`card/${this.change}`, formData)
            alert(`Карточка ${this.change}`)
          } catch(e) {
            alert('Произошла ошибка')
          }
        },
        getImages(data){
          this.images = data
        }
    }
}
</script>

Я думаю проще без vuex решить. Просто я получаю все как надо, но при обновлении карточки у меня не отображаются данные в дочернем компоненте. А именно массив с именами картинок, хотя он там изначально есть. Возможно хук нужен? Но я использовал beforeMount and mounted

[Devero97]

Все четко. Решил проблему.

[Алексей]

Devero97, каким образом?

[Devero97]

Алексей, Хук beforeMount. Я его не использовал, в mounted свойство по дефолту принимало пустой массив

Answer 2

[Swert]

Если вам нет надобности юзать Vuex то можно использовать Props

Передать так

<template>
<component-first data="{ "key": "data" }"></component-first>
</template>

<<script>
export default {
    components: {
        ComponentFirst
    }
}
</script>

А принять вот так

<template>
<p>{{ data }}</p>
</template>

<<script>
export default {
    props: {
        data: Array
    },
    setup (props) {
        // work
    }
}
</script>