WedX - журнал о программировании и компьютерных науках

Запуск изменения состояния хранилища Vuex с помощью сопоставленных действий в функции визуализации Vue

У меня есть функция рендеринга для слайдера, которая открывает модальное окно при нажатии на изображение. У меня есть модальное состояние в моем магазине 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 из моих функций рендеринга при событии щелчка


Ответы:


1

Я нашел способ заставить это работать после пары часов возни. В основном это сводится к доступу к магазину через:

this.$store.state.toggleSwitches.modal_on

а не через сопоставленные геттеры и действия в компоненте слайдера. Затем я отправил это на шину событий и получил доступ к состоянию в модальном компоненте, у которого есть геттеры Vuex, сопоставленные с его областью действия. Из шины событий в модальном компоненте я отправил действие modalSwitch (toggle) в хранилище vuex через:

this.$store.dispatch('modalSwitch')

Вот обновленный код для всех, кто сталкивается с этой проблемой:

-   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])
                 )
+                EventBus.$emit('open_modal', localModalState)
-                // return modalClick
-                // EventBus.$emit('open_modal', this.modalState)
-                // this.modalSwitch(TOGGLE_MODAL)
               }
             }
           })
         ]
       )
     )

И в модальном компоненте:

created() {
    EventBus.$on('clicked_image', imageSrc => {
      this.modalImage = imageSrc
      return this.modalImage
    })
    EventBus.$on('image_group', imageGroup => {
      this.modalImageGroup = imageGroup
      return this.modalImageGroup
    })
    EventBus.$on('image_index', imageIndex => {
      this.modalIndex = imageIndex
      return this.imageIndex
    })
+   EventBus.$on('open_modal', modalState => {
+      return this.$store.dispatch('modalSwitch')
+      // changes vuex store state
+    })

Надеюсь, это проясняет ситуацию для всех, кто сталкивается с той же проблемой.

01.08.2019
Новые материалы

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

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


Для любых предложений по сайту: [email protected]