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

【问题标题】：Vuex store with "strict: true" does not work带有“strict：true”的 Vuex 商店不起作用
【发布时间】：2017-05-14 06:36:24
【问题描述】：

当我设置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 中的行为。

【问题讨论】：

你不应该尝试将整个地图保存到 vuex 商店，因为每次交互时，mapbox 都会改变它
@Nora Than 如何跨组件使用映射变量并从 vuex 提供的功能中受益？
Imo 最好将通用功能提取到单独的模块/服务中，并在需要时导入组件。据我了解，Vuex store 应该用于管理应用程序状态，而不是用于存储全局变量/对象。
@Nora 所以我的理解是：由于地图将通过 dom 与鼠标、缩放等进行交互。它始终是一个全局变量，因此将其存储在 vuex 中并不是最佳实践。我想地图不能成为本地对象？
Imo，地图本身应该是一个组件，不需要任何全局变量。它可以通过 props 和/或通过设置/获取 vuex 存储中的状态与其他组件进行通信。

标签： vue.js vue-component vuex

【解决方案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 组件。由于地图实例引用了 DOM 元素<div id="map">，对我来说它属于视图层，而不是存储层。 Vue 是一个视图层框架，专注于与 DOM 相关的所有内容，而 Vuex 是一个状态管理库，最适合可序列化的应用程序状态（如 JSON 数据），它应该与实际的 DOM 元素解耦。

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

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

【讨论】：