В доке 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 в родительском компоненте, в дочернем все отрисовалось. Как лучше то сделать?