Как разделить данные во Vuex?

Question

[Валерий В.]

Собственно, вопрос такой - нужно хранить состояния в vuex, но не хотелось бы их все в кучу мешать. Сразу оговорюсь - модули не будем использовать (пока). Пробую реализовать это через объекты, типа:

someState:{
  state1:value,
  state2:value,
  ...
  stateN:value
}

и потом в процессе работы менять эти состояния state через someState.state1, но почему то они не хотят меняться поодиночке, а менять можно только целиком состояние someState.
А вот как сделать, чтобы не перезаписывать полностью весь объект someState, а только state менять?

Comments

[Андрей Хохлов]

Свойство не меняется или не сообщает о том, что изменилось?
Если второе и проблема с watch, то там есть параметр deep.

[Evgeny Kulakov]

Вы состояние хранилища через мутации меняете?

[Валерий В.]

Вот код:

<template>
  <component>
    v-bind:value="someState1.state1.value" 
    v-bind:options="someState2.state2" 
  </component>
</template>

data:{
  someState1:{
    state1:{value:''}
  },
  someState2:{
    state2:{1:'yes', 2:'no'}
  }
}

При начальной загрузке все показывает, но, допустим, я подгружаю асинхронно данные и меняю someState2.state2 = {....новые данные......}, то не биндятся они почему то. Пробовал и через $set, и через Object.assign - никак..
Хотя в DOM они есть - в браузере видно.
Меняю значение someState1.state1.value = 999, то же самое - в консоль выводит что значение новое присвоено, но select не отображает почему то... (компонент - это select)
Вот и не пойму - данные новые есть, но select не ставится в новую позицию selected

[Валерий В.]

Андрей Хохлов:
за deep спасибо - в доках как то на нем не акцентировано внимание...

[Валерий В.]

Evgeny Kulakov:
да, конечно

[Андрей Хохлов]

Валерий В.: а вы уверены, что компонент у себя внутри адекватно работает? Если сделать просто data() { state: value } - он поймает изменение? https://monterail.github.io/vue-multiselect/#sub-v... вот тут посмотрите пример того о чем я говорю.

И в вашем примере vuex то где?

[Evgeny Kulakov]

Есть ощущение, что проблема у вас в самом компоненте, т.е. данные у вас нормально приходят, но компонент не обновляется. Возможно как-то не правильно биндятся переменные или что-то подобное. Попробуйте упростить пример, не используйте vuex, возьмите тестовые данные для проверки. Выложите код на jsfiddle/codepen.

[Валерий В.]

Андрей Хохлов:
Посмотрел пример - что то вроде того у меня, если брать ансинхронную загрузку данных. Еще информация к размышлению - у меня форма со множеством контролов-select, и те из них, которые сразу при создании компонента-родителя имеют все исходные данные (и options и selected value) , которые при создании передаются в компонент-потомок, вот эти контролы нормально показывают и все options и изначально установленное значение selected. А вот те, в которые потом данные (options и selected value) подгружаю асинхронно и меняю изначально установленные при создании данные на загруженные, то:
1. options у selecta есть - т.е. вручную могу выбрать новые значения.
2. selected value в data компонента-родителя присвоено новое значение, в консоль вывожу полный объект data - показывает что свойство data, передающее в компонент-потомок значение для selected изменено на новое.
3. т.е. получается, что новые данные в data компонента-родителя есть, но передается почему то только значения options, а для selected не передается.
Вопрос - почему? Что я делаю не так?

[Валерий В.]

Андрей Хохлов:
а сначала через vuex передавал данные, потом уже напрямую стал - все равно не работает...

[Валерий В.]

Evgeny Kulakov:
да вроде компонент-потомок работает, раз правильно отображает данные при создании компонента родителя...

[Валерий В.]

У меня подозрение, что не биндятся данные.
Можете подсказать - data:{someState1.state1.value} - это будет реактивно?
Или только просто data:{state1} будет реактивно, а глубже уже нет?
И еще - при изменение данных data объекта с глубиной вложенности больше 1 будет работать v-bind ???

[Evgeny Kulakov]

При создании да, а вот при обновлении может и не работать. Вот пример некорректно работающего кода, может у вас что-то подобное: https://codepen.io/kerf/pen/Ngxmem

[Валерий В.]

Evgeny Kulakov:
ну по сути аналог моего
а причина почему не работает?
и что сделать чтоб работал?

[Evgeny Kulakov]

Данные присваиваются один раз при инициализации, потом не обновляются. Добавьте вотчер для примера. Смотрите, обновил ссылку выше.

[Валерий В.]

Evgeny Kulakov:
давайте сформулирую, а вы pls поправьте если не так:
т.е. значение value, переданное в сам props будет передаваться всегда, но в сам select будет передаваться из props только один раз при создании select, а если в дальнейшем менять значение value, то в props будет передано новое значение value, а вот далее оно в сам select не передается? так?
и чтобы это значение из props передать далее в сам select, нужно через наблюдатель watch передать его вручную в select, так ?

[Валерий В.]

И еще один вопрос: можете разъяснить - в чем разница у select значения selected и value ?
Чем пользоваться надо, this.selected или this.value ?
Потому что у меня в коде сейчас через this.value = '999'; работает, а через this.selected = '999'; не работает.
Может наверное selected с index связан, а value с непосредственно значением?
В общем не совсем понятны зависимости....

[Evgeny Kulakov]

Оформил в ответе, если есть вопросы, пишите.

[Валерий В.]

Evgeny Kulakov:
Напишите, пожалуйста, про различия selected и value

[Валерий В.]

и еще вопрос:
обязательно ли прописывать у select
v-model="selected"
или можно обойтись простым
v-bind
?

[Evgeny Kulakov]

Трудно сказать не видя ваш код. В моем примере value - это входной параметр, он не должен изменяться. this.selected - это переменная, отвечающая за value селекта. Т.е. значение из selected сопоставляется с value из option и при совпадение устанавливается соответствующий элемент. Почитайте доку, там вроде все понятно: https://ru.vuejs.org/v2/guide/forms.html

[Evgeny Kulakov]

v-model - двустороннее связывание, если поставите v-bind только, то значение selected не будет изменяться, когда пользователь будет выбирать какой-то элемент списка.

[Валерий В.]

Evgeny Kulakov:
изменение значения я делал через v-on:change=""

[Валерий В.]

В общем проблему решил.
Причин было много, одна из них - это подсказанная Evgeny Kulakov: про вотчер,
также почему selected не выставлялся правильно: при получении данных асинхронно, формат был такой {'1':'string', '2':'string',,,,,,} , а т.к. в данном формате ключи автоматически приводятся из строки к числу, и, соответственно, автоматически происходит сортировка объекта по числовым ключам по возрастанию (оптимизация движка js), и, чтобы избежать этого и сохранить изначальный порядок сортировки значений, проставлял к строковым ключам дополнительно '+', вот так {'+1':'string'}, и тогда select выводил в правильном порядке значения. Но именно же и поэтому не выставлялся selected - на вход приходило число 1, а в option было значение '+1', и, т.к. значения не одинаковые, selected не находил нужный option.
Плюс также сами значения приходили асинхронно через 3 подряд идущих callback, а так как в родительском компоненте стояли вотчеры на изменение значений, то эти вотчеры срабатывали позже, чем обрабатывалось измененное значение у select, поэтому пришлось использовать next.tick для изменения порядка обработки изменений значений вотчерами...
В общем, достаточно сложная мешанина действий и событий, поэтому непросто было отследить кривой участок кода.
Всем спасибо за активное участие, отдельная благодарность Evgeny Kulakov: за грамотные и четкие ответы!

[Evgeny Kulakov]

Круто) что-то мне подсказывает, что нужно упрощать данный кусок, иначе через месяц без бутылки.. Ну вы сами знаете) У реактивности есть обратная сторона - когда её слишком много, хрен поймешь что происходит)

[Валерий В.]

Evgeny Kulakov:
Компонент универсальный для разных типов параметров с четкими входными и выходными данными, поэтому раздробить, конечно, можно, но потеряется универсальность. Зато теперь можно вставить куда угодно и только данные менять - и всё! Ну, и, документирование, документирование и еще раз документирование - всего и вся ;)

Answer 1

[Evgeny Kulakov]

Ответ такой (см. комментарии выше):

Ссылка на пример кода: https://codepen.io/kerf/pen/Ngxmem

Вот это присвоение сработает только один раз при инициализации компонента:

data() { 
  return {
   selected: this.value
  }

Чтобы обновлять selected при изменении value можно воспользоваться одним из следующих способов:

1. слежение за изменением:

watch: {
    value: function () {
      this.selected = this.value
    }
  }

2. обновляем в хуке:

beforeUpdate() {
    this.selected = this.value
  }

3. в пропсы передать объект, он передается по ссылке, поэтому если в нем снаружы изменить значения, они автоматически должны измениться внутри компонента (не проверял, но по логике должно работать).