У меня есть функция рендеринга для слайдера, которая открывает модальное окно при нажатии на изображение. У меня есть модальное состояние в моем магазине Vuex, и мне нужно отправить действие из тега изображения в моей функции рендеринга.
У меня есть событие щелчка, прикрепленное к нему, как и в официальной документации vue, и состояние хранилища vuex сопоставлено с областью моих компонентов, но у меня возникают проблемы с включением сопоставленных действий в мою функцию рендеринга.
Цель состоит в том, чтобы изменить состояние с false на true, чтобы модальное окно открылось.
Я относительно новичок в углубленной работе с vue, поэтому не знаю, как это сделать. Все мои предыдущие попытки потерпели неудачу, и я действительно мог бы воспользоваться некоторыми советами в этой области. Я уверен, что это действительно простое решение, я просто не смог его найти
У меня есть два подхода к доступу к магазину Vuex. Меня устраивает то, что работает лучше всего.
computed: {
...mapGetters(['modalState']),
modalState() {
return this.$store.state.toggleSwitches.modal_on
}
},
Я настроил сопоставленные действия в своих методах компонента
methods: {
...mapMutations(['TOGGLE_MODAL']),
...mapActions({ modalSwitch: 'modalSwitch' })
modalClick() {
this.$store.dispatch('modalSwitch') // commits TOGGLE_MODAL
}
},
А вот моя функция рендеринга, которая должна обрабатывать событие щелчка.
h(
'slide',
{
attrs: {
class: 'particle-inner project_slide flex'
},
props: {
index: ucid++
}
},
[
h('img', {
attrs: {
src: imageContent[i],
class: 'packet-inner project_content'
},
on: {
click(e, modalClick) {
EventBus.$emit('clicked_image', imageContent[i])
EventBus.$emit('image_group', imageLogGroup)
EventBus.$emit(
'image_index',
indexOf(imageLogGroup, imageContent[i])
)
// return modalClick
// EventBus.$emit('open_modal', this.modalState)
// this.modalSwitch(TOGGLE_MODAL)
}
}
})
]
)
)
Прокомментированные разделы в нижней части функции рендеринга - это мои различные неудачные попытки вызвать изменение состояния в хранилище vuex из функции рендеринга.
В настоящее время все мои подходы либо не работают, либо выдают ошибки, когда я ссылаюсь на this из функции рендеринга. Я просто ищу хороший способ получить доступ и изменить состояние хранилища Vuex из моих функций рендеринга при событии щелчка