Почему не изменяется значение в Vuex?

Question

[MeMoJlor]

Есть список с кнопками. По клику на кнопку вызывается мутация, в которою передаётся id. Берется булево свойство cheked у элемента с указанным id, и его значение инвертируется, но в стейте ничего не меняется. Я так понимаю, потому что метод возвращает только false/true, а не измененный item. Как в данной ситуаций грамотно реализовать метод?

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    posts: [
      {txt: '123', cheked: false, id: 40934564356},
      {txt: '321', cheked: true, id: 23546345656},
      {txt: '132', cheked: false, id: 35645645345},
    ]
  },
  mutations: {
    chekedItem(state, id) {
      return state.posts.filter(item => item.id == id)
      .map(item => item.cheked = !item.cheked);
    }
  },
})

Answer 1

[0xD34F]

По клику на кнопку вызывается мутация, в которою передаётся id.

Эти слова следовало проиллюстрировать кодом. Потому что сама по себе показанная вами мутация... дичь дикая конечно, но рабочая, проблема где-то в другом месте - может, неправильно вызываете мутацию, или не ту, или при вызове передаёте несуществующий id.

Я так понимаю, потому что метод возвращает только false/true, а не измененный item.

Не понимаете. Какая разница, что вы там из мутации возвращаете? Да никакой.

Как примерно должен был выглядеть ваш код. Смотрите, сравнивайте с тем, что у вас реально есть.

UPD. Вынесено из комментариев:

id передается, проверял через консоль

...mapMutations(['chekedItem', 'deleteItem']),
itemSucces(id) {
  this.chekedItem({id});
},

Правда проверяли? И как же вы ухитрились при этом не заметить, что передаёте объект вместо числа? Кстати, в данной ситуации можно и объект передавать - сам item, тогда его не придётся искать в мутации:

chekedItem: (state, item) => item.checked = !item.checked,

Зачем метод дополнительный создавать? - вызывайте сразу chekedItem, а itemSucces удалите.

Comments

[MeMoJlor]

id передается, проверял через консоль.
Вот кнопочки:

<template>
	
	<ul class="main">
		<li  v-for='post in posts' :key='post.id'>
			<div class="text">{{ post.txt }}</div>
			<div class="buttons">
				<button @click='itemSucces(post.id)'>button1</button>
				<button @click='removeItem(post.id)'>button2</button>
			</div>
		</li>
	</ul>
	
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default{
	name: 'TodoItem',
	data() {
		return {
		};
	},
	methods: {
		...mapMutations(['chekedItem', 'deleteItem']),
		itemSucces(id) {
			this.chekedItem({id});
		},
		removeItem(id) {
			this.deleteItem({id});
		}
	},
	computed: {
		...mapGetters(['posts']),
		
	}
}
</script>

[0xD34F]

Дополнил ответ.

[MeMoJlor]

0xD34F, Спасибо, исправил. Сам не заметил бы

Answer 2

[Rsa97]

Мутации - это синхронные методы, непосредственно меняющие значение свойств. У вас ничего не меняется, потому что .map создаёт новый массив, который никуда не записывается.

mutations: {
  TOGGLE_ITEM: (state, id) => {
    const item = state.posts.find((item) => item.id === id);
    if (item !== undefined) {
      item.checked = !item.checked;
    }
  },
},