如何在 Vuex 中为 mapbox 地图设置集中状态？

Posted 2023-02-23

【中文标题】如何在 Vuex 中为 mapbox 地图设置集中状态？

【英文标题】：How to setup a centralized state for a mapbox map in Vuex?

【发布时间】：2017-05-09 13:21:51

【问题描述】：

我刚开始使用 vuex 和 vue。我确实（大致）了解文档。我有一个具体的问题，我不确定是否应该使用 vuex，如果可以，该怎么做。

我有一个应用程序，其中 mapbox 地图在各种布局和组件等中无处不在。因为我将制作几个 vue 单文件组件，但正在使用同一个 mapbox 地图实例，我认为这样做是有意义的在 vuex 商店中启动和管理 mapbox 地图。所以例如当我更改地图布局或其他内容时，它将反映在所有组件中。

当我继续朝这个方向前进时，我对一些事情感到困惑：

地图不仅仅是一个变量/数组，而是一个mapbox类地图的实例。所以我想初始状态是一个空对象，然后它需要被初始化。正确吗？ 我想初始化是异步的，只能在页面加载后发生。这可能就是我下面的代码不起作用的原因！？

我尝试了以下操作：

制作了一个mapboxmap模块，用

ma​​pboxmap.js

import simple from '../../components/simplestyle'
let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')

// initial state
const state = 
  myMap: ,
  mapLoaded: false


const mutations = 
  loadMap (state, myMap) 
    state.myMap = myMap
    state.mapLoaded = true
  


const actions = 
  loadMap (context) 
    'use strict'
    mapboxgl.accessToken = 'mysecretmapboxcode'
    let myMap = new mapboxgl.Map(
      container: 'map',
      style: simple,
      hash: true,
      center: [-74.0073, 40.7124],
      zoom: 16
    )
    context.commit('loadMap', myMap)
  


export default 
  state,
  mutations,
  actions

作为组件：

Mapoutout.vue

<template>
  <div>
    <div id='map' class='map'>
    </div>
  </div>
</template>

<script type='text/babel'>
export default 
  mounted () 
    this.computed.myMapForView.set().then(() => this.computed.myMapForView.get())
  ,
  computed: 
    myMapForView: 
      // getter
      get: function () 
        return this.$store.state.myMap
      ,
      // setter
      set: function () 
        this.$store.dispatch('loadMap')
      
    
  

</script>

这不起作用。非常感谢有关解决方案方法和具体方法的任何建议。

我在浏览器中收到的错误消息：

vue.runtime.common.js?d43f:433 TypeError: Cannot read property 'myMapForView' of undefined
    at VueComponent.mounted (eval at 162 (0.ce2d9bf….js:21), <anonymous>:8:18)
    at callHook (eval at <anonymous> (app.js:794), <anonymous>:2335:19)
    at Object.insert (eval at <anonymous> (app.js:794), <anonymous>:2525:5)
    at invokeInsertHook (eval at <anonymous> (app.js:794), <anonymous>:4352:28)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:794), <anonymous>:4508:5)
    at VueComponent.Vue._update (eval at <anonymous> (app.js:794), <anonymous>:2222:19)
    at VueComponent.eval (eval at <anonymous> (app.js:794), <anonymous>:2189:10)
    at Watcher.get (eval at <anonymous> (app.js:794), <anonymous>:1652:27)
    at Watcher.run (eval at <anonymous> (app.js:794), <anonymous>:1721:22)
    at flushSchedulerQueue (eval at <anonymous> (app.js:794), <anonymous>:1539:13)
logError @ vue.runtime.common.js?d43f:433

编辑： 从this.computed.myMapForView 更改为this.myMapForView 后，我在浏览器中收到以下错误消息：

vue.runtime.common.js?d43f:433 
TypeError: Cannot read property 'set' of undefined
    at VueComponent.mounted (eval at 162 (0.85b2be9….js:21), <anonymous>:6:22)
    at callHook (eval at <anonymous> (app.js:794), <anonymous>:2335:19)
    at Object.insert (eval at <anonymous> (app.js:794), <anonymous>:2525:5)
    at invokeInsertHook (eval at <anonymous> (app.js:794), <anonymous>:4352:28)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:794), <anonymous>:4508:5)
    at VueComponent.Vue._update (eval at <anonymous> (app.js:794), <anonymous>:2222:19)
    at VueComponent.eval (eval at <anonymous> (app.js:794), <anonymous>:2189:10)
    at Watcher.get (eval at <anonymous> (app.js:794), <anonymous>:1652:27)
    at Watcher.run (eval at <anonymous> (app.js:794), <anonymous>:1721:22)
    at flushSchedulerQueue (eval at <anonymous> (app.js:794), <anonymous>:1539:13)
logError @ vue.runtime.common.js?d43f:433

【参考方案1】：

在我看来new mapboxgl.Map() 是一个异步函数，在vuex 中Actions 可以包含任意异步操作，而不是来自mutations 的突变。 变异处理函数必须是同步的。

因此，您应该在以下操作中执行new mapboxgl.Map()：

import simple from '../../components/simplestyle'
let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')

// initial state
const state = 
  myMap: ,
  mapLoaded: false


const mutations = 
  loadMap (state, myMap) 
    state.myMap = myMap
  


const actions = 
  loadMap (context) 
    'use strict'
    mapboxgl.accessToken = 'mysecretmapboxkey'
    var myMap = new mapboxgl.Map(
      container: 'map',
      style: simple,
      hash: true,
      center: [-74.0073, 40.7124],
      zoom: 16
    )
    context.commit('loadMap', myMap)
  


export default 
  state,
  mutations,
  actions

---

编辑：

鉴于您的鼠标交互导致状态发生变化，您可以在您的 vue 实例中使用getter and setter 有一个computed property，如下所示：

computed: 
  myMapForView: 
    // getter
    get: function () 
      return this.$store.state. myMap
    ,
    // setter
    set: function (newMap) 
      this.$store.commit('loadMap', newMap)
    
  

---

工作小提琴：http://jsfiddle.net/aucqteLn/

同时检查：Vuex store with "strict: true" does not work

【讨论】：

谢谢。好点子。我编辑了我的问题，包括你的 cmets。但是仍然不起作用（不在浏览器中显示地图）。我将包含我收到的错误消息。

@musicformellons 看起来，您正在某处更改 vuex 存储状态，如前所述，vuex 变量只能通过突变来更改。可以添加watcher相关的代码吗？

我不认为我正在从代码中的其他位置更改 vuex 存储状态...看起来 mapobject 在那里，但它不显示图块。当我在 mapcanvas 上与鼠标交互时，我确实在浏览器中收到类似的错误消息，所以我现在的印象是我与地图的交互事件（加载、移动结束、鼠标单击等），都被认为是“改变” vuex 状态'而不使用突变或动作，这很有意义，因为我认为 state.map 对象已更改。这有意义吗？以及如何进行？！

我做了一些更改...查看编辑的代码和错误消息。我们需要调度，而不是提交，对吧？！我还省略了函数的 newMap 参数，因为我们的地图将是 myMap，对吧？！

@musicformellons 你只需要this.myMapForView 而不是this.computed.myMapForView。