"strict: true"가 포함된 Vuex 스토어가 작동하지 않음

"strict: true"가 포함된 Vuex 스토어가 작동하지 않음

내가 설정할 때strict: true오류가 발생하는 경우:

vue.js:525 [Vue warn]: Error in watcher "state" 
(found in root instance)
warn @ vue.js:525
run @ vue.js:1752
update @ vue.js:1720
notify @ vue.js:584
reactiveSetter @ vue.js:814
Transform.resize @ transform.js:169
e.resize @ map.js:343
e._onWindowResize @ map.js:1204

vue.js:1756 Uncaught Error: [vuex] Do not mutate vuex store state outside mutation handlers.
    at assert (vuex.js:182)
    at Vue$3.store._vm.$watch.deep (vuex.js:714)
    at Watcher.run (vue.js:1746)
    at Watcher.update (vue.js:1720)
    at Dep.notify (vue.js:584)
    at Transform.reactiveSetter [as width] (vue.js:814)
    at Transform.resize (transform.js:169)
    at e.resize (map.js:343)
    at e._onWindowResize (map.js:1204)

내가 설정할 때strict: false아니면 선을 완전히 빼버리면 잘 될 거야엄격한 모드에서 작업하는 것이 좋으므로 오류를 방지하려면 어떻게 해야 하는가?내 코드로 변이 처리기 바깥에 있는 가게를 변이하고 있다고 생각하지 않기 때문에!?

이 바이올린에서 동작을 보십시오.

내 코드에 있는 돌연변이 처리기 외부의 저장소를 돌연변이가 아닌 것 같기 때문에

돌연변이 처리기 외부에서 저장 상태를 변경하지 않더라도 맵박스글.지도 인스턴스가 그렇다.

var myMap = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  hash: true,
  center: [-74.0073, 40.7124],
  zoom: 16
})

여기서 DOM 요소에 대한 참조를 포함하여 고유한 상태 및 메서드를 가진 맵 클래스의 인스턴스를 만들고 있다.이 지도 인스턴스는 DOM 이벤트(사용자 상호작용)를 수신하고 자체 상태를 업데이트하여 vuex의 규칙을 위반한다.

내 제안은 다른 사람들이 말한 대로 지도에 대한 vue 구성 요소를 만들어야 한다는 것이다.지도 인스턴스(instance)가 DOM 요소에 대한 참조를 가지고 있으므로<div id="map">, 나에게 그것은 보기 계층에 속하지, 저장 계층에 속하지 않는다.Vue는 뷰 레이어 프레임워크로 DOM과 관련된 모든 것에 초점을 맞추고 있으며, Vuex는 (JSON 데이터와 같이) 직렬화할 수 있는 애플리케이션 상태에 가장 적합한 상태 관리 라이브러리로서 실제 DOM 요소에서 분리되어야 한다.

다른 구성 요소와의 통신의 경우, 부모-자녀 직접적인 관계인 경우 소품/하위 참조 및 이벤트 콜백을 사용할 수 있으며, 그렇지 않은 경우 지도 인스턴스에서 특정 상태(예: 줌)를 추출/복사하여 vuex 스토어에 저장하거나 글로벌 이벤트 버스를 사용할 수 있다.

참고로, Vue는 DOM을 변이시키는 어떤 도서관과도 잘 어울릴 것이라는 보장이 없다.이러한 lib를 사용하는 사용자는 이를 관리할 책임이 있으며, 라이프사이클 훅은 그런 일을 하기에 최적의 장소다.

참조URL: https://stackoverflow.com/questions/41388113/vuex-store-with-strict-true-does-not-work