title: How to setup a centralized state for a mapbox map in Vuex?
body: <p>I just started using vuex with vue. I do (roughly) understand the docs. I have a specific issue for which I am not sure whether I should use vuex and if so how to go about.</p>
  
  <p>I have an app in which mapbox map(s) are omnipresent in various layouts and components etc. As I will be making several vue single file components but are working with one same instance of a mapbox map I think it makes sense to have the mapbox map initiated and managed in the vuex store. So e.g. when I change the map layout or something else, it will be reflected in all components. </p>
  
  <p>When I continue in this direction I am puzzled by a couple of things:</p>
  
  <ol>
  <li>The map is not just a variable/ array, but an instance of the mapbox class map. So I suppose the initial state is an empty object and then it needs to be initialized. Correct?</li>
  <li>The initialization is asynchronous and can only happen after the page is loaded, I suppose. That might be why my code below is not working!?</li>
  </ol>
  
  <p>I tried  following:</p>
  
  <p>Made a mapboxmap module, with </p>
  
  <p><strong>mapboxmap.js</strong></p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>And as component:</p>
  
  <p><strong>Maplayout.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div id='map' class='map'&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script type='text/babel'&gt;
  export default {
    mounted () {
      this.computed.myMapForView.set().then(() =&gt; this.computed.myMapForView.get())
    },
    computed: {
      myMapForView: {
        // getter
        get: function () {
          return this.$store.state.myMap
        },
        // setter
        set: function () {
          this.$store.dispatch('loadMap')
        }
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Which does not work. Any suggestions on the solution approach and specific way to do this is much appreciated.</p>
  
  <p>Error message I get in the browser:</p>
  
  <pre><code>vue.runtime.common.js?d43f:433 TypeError: Cannot read property 'myMapForView' of undefined
      at VueComponent.mounted (eval at 162 (0.ce2d9bf….js:21), &lt;anonymous&gt;:8:18)
      at callHook (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:2335:19)
      at Object.insert (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:2525:5)
      at invokeInsertHook (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:4352:28)
      at VueComponent.patch [as __patch__] (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:4508:5)
      at VueComponent.Vue._update (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:2222:19)
      at VueComponent.eval (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:2189:10)
      at Watcher.get (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:1652:27)
      at Watcher.run (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:1721:22)
      at flushSchedulerQueue (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:1539:13)
  logError @ vue.runtime.common.js?d43f:433
  </code></pre>
  
  <p>EDIT:
  After changing to <code>this.myMapForView</code> from <code>this.computed.myMapForView</code> I got following errormessage in browser:</p>
  
  <pre><code>vue.runtime.common.js?d43f:433 
  TypeError: Cannot read property 'set' of undefined
      at VueComponent.mounted (eval at 162 (0.85b2be9….js:21), &lt;anonymous&gt;:6:22)
      at callHook (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:2335:19)
      at Object.insert (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:2525:5)
      at invokeInsertHook (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:4352:28)
      at VueComponent.patch [as __patch__] (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:4508:5)
      at VueComponent.Vue._update (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:2222:19)
      at VueComponent.eval (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:2189:10)
      at Watcher.get (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:1652:27)
      at Watcher.run (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:1721:22)
      at flushSchedulerQueue (eval at &lt;anonymous&gt; (app.js:794), &lt;anonymous&gt;:1539:13)
  logError @ vue.runtime.common.js?d43f:433
  </code></pre>