Vuex магазин с «строго: правдой» не работает

Question

Когда я установил 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 или оставьте строку полностью, это работает отлично. Рекомендуется работать в строгом режиме: что я могу сделать, чтобы избежать ошибки? Поскольку я не думаю, что я мутирую магазин вне обработчиков мутаций в моем коде !?

См. Поведение в this fiddle.

Answer 1

As I do not think I am mutating the store outside mutation handlers in my code

Хотя вы не мутируете состояние хранилища вне обработчиков мутаций, экземпляр mapboxgl.Map делает.

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

Здесь вы создаете экземпляр класса Map, который имеет свое собственное состояние (в том числе ссылки на элемент DOM) и методов. Этот экземпляр карты будет прослушивать события DOM (взаимодействие с пользователем) и обновлять свое собственное состояние, нарушая правило vuex.

Мое предложение состоит в том, что вы должны создать компонент vue для карты, как говорили другие. Поскольку экземпляр карты имеет ссылку на элемент DOM <div id="map">, для меня он относится к слою представления, а не к слою хранилища. Vue - это среда уровня представления и фокусируется на всем, что связано с DOM, а Vuex - это библиотека управления состоянием, которая лучше всего подходит для сериализуемого состояния приложения (например, данные JSON) и должна быть отделена от реальных элементов DOM.

Что касается связи с другими компонентами, если это прямые отношения родитель-потомок, вы можете использовать реквизиты/дочерние ссылки и обратные вызовы событий; в противном случае вы можете извлечь/скопировать определенное состояние (например, масштабирование) из экземпляра карты и сохранить его в хранилище vuex или использовать global event bus.

В качестве побочного примечания, vue не гарантирует, что он будет хорошо работать с любым либралом, который мутирует DOM. Пользователь, который использует такой lib, отвечает за управление им, а крючки жизненного цикла - лучшее место для таких вещей.