Vuex专卖店“严格:真”不起作用
Vuex专卖店“严格:真”不起作用
提问于 2016-12-29 22:32:41
当我设置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，或者完全不使用行时，它可以正常工作。建议在严格的模式下工作:我能做些什么来避免错误？因为我不认为我是在代码中的变异处理程序之外对存储进行变异！？
参见这把小提琴中的行为。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-31 21:18:29
因为我不认为我是在代码中的变异处理程序之外对存储进行变异。
虽然您没有在突变处理程序之外改变存储状态，但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元素的引用)和方法。这个map实例将侦听DOM事件(用户交互)并更新自己的状态，从而打破vuex的规则。
我的建议是，您应该为地图创建一个vue组件，就像其他人说的那样。由于映射实例引用DOM元素<div id="map">，因此它属于视图层，而不是存储层。Vue是一个视图层框架，主要关注与DOM相关的所有内容，而Vuex是一个状态管理库，它最好用于可序列化的应用程序状态(如JSON数据)，并且应该与实际的DOM元素分离。
至于与其他组件的通信，如果它是直接的父-子关系，则可以使用道具/子引用和事件回调；否则，您可以从map实例中提取/复制某些状态(例如缩放)，并将其保存到vuex存储中，或者使用全局事件总线。
顺便提一句，vue并不能保证它能很好地处理任何改变DOM的图书。使用这样一个库的用户负责管理它，而生命周期挂钩是做这些事情的最佳地方。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41388113
复制相关文章
相似问题
腾讯云开发者
