通过 Vue 渲染函数中的映射操作触发 Vuex 存储状态更改

Question

我有一个滑块的渲染函数，当单击图像时它会打开一个模式。我的 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 存储状态的好方法

Answer 1

经过几个小时的摆弄，我想出了一个让它工作的方法。它基本上归结为通过以下方式访问商店：

this.$store.state.toggleSwitches.modal_on

而不是通过滑块组件中的映射 getter 和操作。然后我将其推送到事件总线并访问模态组件中的状态，该组件确实将 Vuex getter 映射到其范围。从模态组件中的事件总线，我通过以下方式将 modalSwitch（切换）操作发送到 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
+    })

希望这能为遇到相同问题的任何人澄清事情。

通过 Vue 渲染函数中的映射操作触发 Vuex 存储状态更改

Triggering Vuex Store State Change via Mapped Actions in Vue Render Function

modal-dialog

event-handling

vue.js

vuex

nuxt.js