2

В доке vuex очень мало сказано про то, как нам его использовать с v-for. По крайней мере, для меня этого не достаточно, чтоб понять, как действовать в моем случае. Итак, у меня есть следующий UI:

введите сюда описание изображения

Поясню, что тут происходит. При каждом нажатии на кнопку Добавить сообщение появляется еще одна форма, где можно выбрать язык (список из {name: ... ,id: ...} объектов через этот плагин), тайтл, текст и картинка. Я уже нажал два раза. У меня появилось две формочки. Этот функционал планируется к использованию неоднократно, потому я сделал его отдельным компонентом. Я планирую сохранять эти "сообщения", которые создаются на формочках в vuex. Этот компонент у меня часть большого компонента, который называется "Рассылка". При заходе на страницу, где рендерится Рассылки, ее данные приходят с сервера. Я не использую vue роутер, а осуществляю маршрутизацию по приложению средствами сервера, следовательно, на каждую страницу у меня новый стейт. Я собираюсь в компоненте Рассылки инициировать vuex данными, в том числе, установить туда эти "сообщения". Но тут уже v-model, как с локальным стейтом, не сработает. А как мне заставить отрендериться в дочернем компоненте эти данные сразу после того, как я инициирую vuex, причем, без костылей на ватчерах и красиво, я не представляю себе.

В данный момент компонент работает с локальным стейтом и это хорошо работает на create. Но вот с update я похоже облажался. Чуит мое сердце, что можно как то легко сделать. Но не догоняю, как. Я приведу здесь код компонента, упростив все, что связано с созданием картинок. Это сейчас не так важно.

<template>
    <div>
        <button class="btn btn-outline-info" @click.prevent="createNewMessage">
            <i class="fa fa-language"/> Добавить сообщение
        </button>

        <div>
            <div v-for="(message, index) in messages">
                <b-button v-b-toggle="`collapse-${index}`" class="m-1">
                    <span v-if="message.title.trim().length > 0">Развернуть/свернуть {{ message.title}}</span>
                    <span v-else><i class="fa fa-mouse-pointer"/> Развернуть/свернуть сообщение</span>
                </b-button>
                <button class="btn btm-sm btn-danger" @click="deleteMessage(index, message)"><i class="fa fa-remove"/>
                </button>

                <b-collapse collapsed :id="`collapse-${index}`">
                    <form>
                        <div class="form-group">
                            <label class="typo__label">Выбирите языки</label>
                            <multiselect
                                    v-model="message.languages"
                                    :options="getLanguagesOptions"
                                    :multiple="true"
                                    :close-on-select="true"
                                    :clear-on-select="false"
                                    :preserve-search="true"
                                    placeholder="Выбирите языки"
                                    label="name"
                                    track-by="id"
                            >
                            </multiselect>
                        </div>

                        <div class="form-group">
                            <label for="title" class="typo__label">Заголовок пуш-уведомления</label>
                            <input type="text" id="title" class="form-control" autocomplete="off"
                                   v-model="message.title">
                        </div>

                        <div class="form-group">
                            <label for="text" class="typo__label">Текст пуш-уведомления</label>
                            <textarea class="form-control" id="text" v-model="message.text"/>
                        </div>

                        <div class="form-group">
                            <div id="upload-image">
                                <div v-if="!message.imageSrc">
                                    <h2>Выбирите картинку</h2>
                                    <input type="file" ref="file" @change="onFileChange($event, message)">
                                </div>
                                <div v-else>
                                    <img :src="message.imageSrc" alt="картинка"/>
                                    <button @click.prevent="removeImage($event, message)">Удалить</button>
                                </div>
                            </div>
                        </div>

                        <hr class="mb-2">
                    </form>
                </b-collapse>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapMutations, mapState, mapGetters} from "vuex";
    import axios from 'axios';

    export default {
        async created() {
            // список языков типа [{name: "русский", id: 1}, ... ] получается именно в этом компоненте 
            let res = (await axios.post(this.urlForGettingLanguagesFromServerProp)).data;
            this.$store.commit('setLanguagesOptions', res);

        },
        name: "MessageComponent",
        props: {
            urlForGettingLanguagesFromServerProp: String,
            uploadImageUrl: String,
            deleteImageUrl: String,
            selectedLanguagesIdsProp: {
                type: Array,
                default: () => []
            },
        },
        methods: {
            ...mapMutations(['setLanguagesSelected']),
            createNewMessage: function () {
                let message = {
                    languages: [],
                    languagesIds: [],
                    title: "",
                    text: "",
                    imageSrc: "",
                    imageDbId: 0
                };
                this.messages.push(message);
            },
            deleteMessage: function (index, message) {
                this.removeImage("", message);
                this.messages.splice(index, 1);
            },

            onFileChange: async function (e, message) {
                ...
            },
            removeImage: function (event, message) {
                ...
            }
        },
        computed: {
            ...mapGetters(['getLanguagesOptions', 'getMessages'])
        },
        watch: {
            messages: {
                deep: true,
                immediate: true,
                handler(val, oldVal) {
                    let message = JSON.parse(JSON.stringify(val));
                    this.$store.commit("setMessages", message);
                }
            }
        },
        data() {
            return {
                messages: [],
            }
        }
    }
</script>

Еще раз, кратко. Есть большой родительский компонент. В него встраивается тот компонент, код которого приведен выше. Этот компонент генерит формочки по клику на кнопку. Я хочу привязать v-for, который отрисовывает формочки в этом компоненте к vuex. Так, чтоб при заполнении vuex в родительском компоненте, в дочернем все отрисовалось. Как лучше то сделать?

1 ответ 1

1

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

Например так:

У тебя есть:

<div v-for="(message, index) in messages">

и есть:

computed: {
            ...mapGetters(['getLanguagesOptions', 'getMessages'])
        },

Можно сделать получение данных напрямую через ...mapGetters Детали можно найти в документации.

computed: {
-            //...mapGetters(['getLanguagesOptions', 'getMessages']),
+            ...mapGetters(['getLanguagesOptions']),
+            ...mapGetters({
+              messages: 'getMessages',
+            },
data() {
            return {
-                messages: [], // при использовании ...mapGetters становится не нужен
            }
        }

В этом случае в шаблон данные попадут сразу после изменения в сторе.

На счет обновление не должно возникнуть проблем. Диспач данные по кнопке "создать" остальное сделает Vuex.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.