"strict: true" 的 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.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 class 的实例，它有自己的状态（包括对 DOM 元素的引用）和方法。此地图实例将监听 DOM 事件（用户交互）并更新自己的状态，从而打破 vuex 的规则。

我的建议是你应该像其他人说的那样为地图创建一个vue组件。由于地图实例引用了 DOM 元素 <div id="map">，对我来说它属于视图层，而不是商店层。 Vue 是一个视图层框架，专注于与 DOM 相关的一切，而 Vuex 是一个状态管理库，最适合可序列化的应用程序状态（如 JSON 数据），它应该与实际 DOM 元素。

至于与其他组件的通信，如果是直接的父子关系，可以使用props/childrefs和事件回调；否则你可以 extract/copy 来自地图实例的特定状态（例如，缩放）并将其保存到 vuex 存储，或使用 global event bus。

附带说明一下，vue 不保证它能与任何改变 DOM 的库一起良好运行。使用此类库的用户负责管理它，而生命周期挂钩是执行此类操作的最佳场所。

"strict: true" 的 Vuex 存储不起作用

Vuex store with "strict: true" does not work

vue.js

vue-component

vuex