Есть приложение на вью, где есть главный объект и компоненты. Все это работает через vue-cli, то есть разбито по компонентам.
Я использую главный объект вью как хранилище информации, которой удобно пользоваться из всех компонентов.
Выглядит это примерно так:
new Vue({
...
data: {
userInfo: {},
messages: {},
...
}
});
Я так понимаю, что для хранения информации используется vuex, но я до него пока не дошел.
Так вот, из компонентов я получаю доступ от так:
this.$root.userInfo.name = 'Vasya';
this$root.messages.push({text: 'New message'});
И в одном из компонентов я прямо из $root вывожу все сообщения:
<li v-for="message in $root.messages">{{ message.text }}<li>
Этот код вроде бы работал, но по какой-то причине перестал реагировать на изменения в $root.messages.
Вместо этого я в компоненте завел свойство messages и в методе created присваиваю ему сообщения из $root:
#mycomponent
data: function() {
return {
messages: []
}
},
created: function() {
this.messages = this.$root.messages
}
А при изменении $root.messages эмитирую событие, которое отлавливается в этом же компоненте. В общем, если бы в компоненте отслеживались изменения из главного объекта вью, то ничего не надо было бы делать.
Скажите, это у меня что-то не так работает, или так и должно быть? И как вы поступаете в таких случаях?
