Как передать в компонент из vuex изменившиеся данные конкретного объекта store?

Question

[Евгений Журов]

Есть массив элементов в store, на основе которого строится список. У каждого элемента списка есть переключатель состояний конкретного элемента в этом списке. В переключатель передается id списка. Когда переключатель срабатывает, я диспатчу данные в store:

this.$store.dispatch('handler', payload)

Геттер для получения выглядит так:

getState: state => id => {
	return state.listings.find(el => el.id == id).is_edited //возвращает true или false
}

И, наконец, в computed компонента я получаю этот геттер:

this.$store.getters.getState(this.item.id)

Все это срабатывает при загрузке приложения. Что надо сделать, чтобы получать изменившееся значение при срабатывании переключателя?

Comments

[Олег Колтунов]

А как выглядит action 'handler'?

[Евгений Журов]

Олег Колтунов,
ctx.commit('startMutation', data)

а мутация:

startMutation(state, data) {
  state.listings.find(item => item.id == data.id).is_edited = true
}

[Олег Колтунов]

Евгений Журов, Так вы изменяете is_field_edited а получаете is_edited

[Евгений Журов]

Олег Колтунов, да нет, сорри) сначала не то написал, потом исправил. Дело не в этом)

[Евгений Журов]

Олег Колтунов, в общем, там is_edited везде

[Анатолий]

Как в массив попадают элементы?

[Евгений Журов]

Анатолий, загружаются аяксом в app.vue, и оттуда диспатчатся в store.

Answer 1

[Evgeny Kulakov]

Попробуйте заменить мутацию на такую:

startMutation(state, data) {
  const index = state.listings.findIndex(item => item.id === data.id)
  state.listings.splice(index, 1, {...state.listings[index], is_edited: true})
}

Comments

[Евгений Журов]

Спасибо, кажется то, что нужно! Только, наверное, вы имели в виду не .indexOf, а .findIndex()? Во всяком случае, работает именно с findIndex().

[Evgeny Kulakov]

Евгений Журов, ага, точно, поправил в ответе.