Vue 3 Биндинг checkbox на state vuex

Question

Логика в приложении такая: есть TOGGLE чекбокс, который должен в state vuex изменять значение null на true, true на false, false на true и так далее. В зависимости от этого значения будут отрисовываться иконки удаления/редактирования карточки блога. Реализую следующим образом: создаю state во vuex

import { createStore } from "vuex";
import blogCards from './modules/blogCards.js'

const store = createStore({
  modules: {
    blogCards
  }
});


export default store;

Выделил в модуль отдельно логику хранилища для карточек:

const state = {
  editPost: null,
}

const getters = {
};

const actions = {
  toggleEditPost({ commit }) {
    commit('setEditPost');
  }
}

const mutations = {
  setEditPost(state) {
    state.editPost = !state.editPost;
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

Далее в компоненте создаю input type checkbox и button, завязываю на них v-model toggleEditPost и @click toggleEditPost

<input type="checkbox" v-model="toggleEditPost" />
<button @click="toggleEditPost"></button>

Следом идет скрипт в том же компоненте

<script setup>
import { computed } from "@vue/reactivity";
import store from "../store/index";

const sampleBlogCards = computed(() => store.state.blogCards.sampleBlogCards);
const toggleEditPost = () => store.dispatch("toggleEditPost");
</script>

В результате этого по нажатию на кнопку у меня изменяется state во Vuex, а при нажатии на checkbox ничего не происходит, не изменяется. Я так понимаю логика построена верно, раз с кнопкой работает, но чекбокс нужно как-то иначе забиндить? Буду благодарен за помощь.

Общая картина выглядит так

БЛОГ НА HUSL

Vue 3 Биндинг checkbox на state vuex

Ответы (0 шт):