How to change the block class when clicking on its element?

Question

Vue.js

Hello!
There is a store ( Vuex ):

Vue.use( Vuex );

const store = new Vuex.Store({
    state: {
        list: [
          { title: 'option_1' },
          { title: 'option_2' },
          { title: 'option_3' },
          { title: 'option_4' },
        ],
        count: 0
    },
    mutations: {
        itemLike(  ) {

        },
    },
    actions: {},
    getters: {},
});

and template with code:

<template>
    <div class="app-list">
        <div class="app-list__text-fied-wrapper">
            <input class="app-list__textarea" v-model="value" @keyup.enter="addItem()">
        </div>
        <ul class="app-list__ul">
            <li class="app-list__li" v-for="item in listData()" :key="item.title">
                <span class="app-list__title">{{ item.title }}</span>
                <i class="app-list__icon  far fas fa-thumbs-up" @click="like(item)">{{ count }}</i>
            </li>
        </ul>
    </div>
</template>

    export default {
        name : 'ap-list',
        data() {
            return {
                value: '',
            };
        },
        computed: {
            count () {
                return this.$store.state.count
            }
        },
        methods : {
            listData() {
                return this.$store.state.list;
            },
            like(item) {
                this.$store.commit('itemLike', item); // обработчик  на иконки.
            }
        },
    };

How to write logic in the store, when clicking on the .app-list__icon icon , the class would change, for example, to "app-list__li_hidden" in its parent app-list__li ?

Answer 1

Add to the objects on the basis of which the blocks are created, a property that will be responsible for the presence of the class:

state: {
  list: [
    { title: '...', добавитьКласс: false },
    { title: '...', добавитьКласс: false },
    ...

Accordingly, assign a class depending on the value of this property:

<li
  v-for="item in $store.state.list"
  :class="{ имяКласса: item.добавитьКласс }"

Make a mutation that will toggle the value of this property:

mutations: {
  переключитьКласс(state, item) {
    item.добавитьКласс = !item.добавитьКласс;
  },
  ...

Trigger mutation on click:
@click="$store.commit(item)"
All