Vuex에서 지도 상자 맵에 대한 중앙 집중식 상태를 설정하는 방법

Vuex에서 지도 상자 맵에 대한 중앙 집중식 상태를 설정하는 방법

나는 방금 vue와 함께 vuex를 사용하기 시작했다.나는 문서를 이해한다.나는 내가 vuex를 사용해야 하는지 그리고 만약 그렇다면 어떻게 해야 하는지 잘 모르는 특정한 문제가 있다.

나는 다양한 레이아웃과 구성 요소 등에 지도 박스 맵이 만능인 앱을 가지고 있다.나는 vue 단일 파일 구성 요소를 여러 개 만들 예정이지만 지도 박스 맵의 동일한 인스턴스로 작업하고 있으므로, 지도 박스 맵을 vuex 스토어에서 시작하고 관리하는 것이 타당하다고 생각한다.그래서 예를 들어 지도 레이아웃이나 다른 것을 변경하면 모든 구성요소에 반영된다.

내가 이 방향으로 계속 가면 몇 가지 일에 어리둥절해진다.

1. 지도는 변수/배열이 아니라 지도 상자 클래스 맵의 인스턴스다.그래서 초기 상태는 빈 물체인데, 그 다음에 초기화할 필요가 있다고 생각한다.맞나?
2. 초기화는 비동기적이며 페이지가 로드된 후에만 발생할 수 있다.그래서 아래 내 코드가 작동하지 않을 수도 있어!?

나는 다음을 따르려고 노력했다.

지도 상자 맵 모듈 제작,

mapboxmap.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
}

구성 요소:

평면 배치.부에를 하다

<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.myMapForView로부터this.computed.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

내가 보기엔 그런 것 같다.new mapboxgl.Map() 비동기식 함수로서 vuexActions에서는 돌연변이가 아닌 임의의 비동기식 작업을 포함할 수 있다. 돌연변이 처리기 함수는 동기식이어야 한다.

그러니 너는 해야 한다.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
}

---

편집:

마우스 상호 작용으로 인해 상태가 변경되는 경우 다음과 같이 getter와 setter가 있는 vue 인스턴스에 계산된 속성을 가질 수 있다.

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

---

작업 중: http://jsfiddle.net/aucqteLn/

또한 다음을 확인하십시오."strict: true"가 포함된 Vuex 스토어가 작동하지 않음

참조URL: https://stackoverflow.com/questions/41308177/how-to-setup-a-centralized-state-for-a-mapbox-map-in-vuex