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

因为我不认为我在我的代码中突变处理程序之外的商店

虽然您没有在变异处理程序之外改变存储状态，但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组件。由于map实例具有对DOM元素<div id="map">的引用，对我来说它属于视图层，而不是存储层。 Vue是一个视图层框架，专注于与DOM相关的所有内容，而Vuex是一个状态管理库，最适合可序列化的应用程序状态（如JSON数据），它应该与实际的DOM元素分离。

至于与其他组件的通信，如果是直接的父子关系，你可以使用props / child refs和event callbacks;否则，您可以从地图实例中提取/复制某些状态（例如，缩放）并将其保存到vuex商店，或使用global event bus。

作为旁注，vue并不能保证它会与任何改变DOM的图书馆一起运行良好。使用这种lib的用户负责管理它，生命周期钩子是做这些事情的最佳场所。

带有“strict：true”的Vuex商店不起作用

1 个答案: