Question

我有一个Vue component that contains a Leaflet map。目前，我正在使用事件总线模式在其他组件请求它时运行一些Leaflet方法：

// in Map.vue
eventBus.$on('invalidateMapSize', () => {
  this.map.invalidateSize(true)
})

eventBus.$on('setMapView', (coordinates, zoom) => {
  this.map.setView(coordinates, zoom)
})

// in other components
eventBus.$emit('setMapView', [47.6623, 23.6970], 15)

现在我想将我的应用程序过渡到Vuex，我的问题是如何实现相同的功能？

Answer 1

虽然确实有使用VueX并远离事件总线模式的趋势，但我个人发现这两种模式是互补的。

VueX状态与Vue组件数据/道具及其派生词（计算，监视）非常匹配。

但是在某些情况下，您不管理状态，但实际上发生了一些事件：用户单击应该触发一次动作（并且您不关心记录这样的更改，因此状态是无用的/过度杀伤性的）这个目的）；携带临时数据（例如搜索结果）的网络响应；等

在这些情况下，由于VueX中有意删除了等效功能，因此我仍然使用事件总线。

在您的情况下，在我看来，它非常适合后一种情况：Leaflet不（仅）显示从某些状态派生的静态数据（可能是Markers，Tile Layers等），但是启用了用户互动，根据某些事件，您的应用可能会通过不时强制视图而干扰。

尝试使用状态来实现此功能很可能需要在状态中记录最后请求的地图视图，监视该状态并触发状态更改的副作用。然后，当要求将视图重新设置到相同位置时出现问题...

使用Vuex在组件上运行方法

1 个答案: