Vuex 存储“strict: true"不起作用 [英] Vuex store with "strict: true" does not work

问题描述

当我设置 strict: true 时出现错误:

When I set strict: true I get error:

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 或完全保留该行时，它工作正常.建议在严格模式下工作:我该怎么做才能避免错误?因为我不认为我在我的代码中改变了变异处理程序之外的商店！?

When I set strict: false, or leave the line out completely, it works fine. As working in strict mode is recommended: what can I do to avoid the error? As I do not think I am mutating the store outside mutation handlers in my code!?

查看这个小提琴中的行为.

推荐答案

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

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

尽管您没有在变异处理程序之外改变存储状态，但 mapboxgl.Map 实例确实如此.

Although you are not mutating the store state outside mutation handlers, the mapboxgl.Map instance does.

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 的规则.

Here you are creating an instance of a Map class that has its own state (including a reference to the DOM element) and methods. This map instance will listen for DOM events (user interaction) and update its own state, thus breaking vuex's rule.

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

My suggestion is that you should create a vue component for the map as others said. Since the map instance has a reference to the DOM element <div id="map">, to me it belongs to the view layer, not the store layer. Vue is a view layer framework and focuses on everything related to DOM, while Vuex is a state management library which is best for serializable application state (like JSON data) and it should be decoupled from actual DOM elements.

至于与其他组件的通信，如果是直接的父子关系，可以使用props/child refs和事件回调；否则，您可以从地图实例中提取/复制某些状态(例如，缩放)并将其保存到 vuex 商店，或使用 全局事件总线.

As for communication with other components, if it is direct parent-child relationship, you can use props/child refs and event callbacks; otherwise you can extract/copy certain state (e.g., zoom) from the map instance and save it to vuex store, or use a global event bus.

附带说明一下，vue 不能保证它会与任何改变 DOM 的库一起运行良好.使用这样一个库的用户负责管理它，生命周期钩子是做这些事情的最佳场所.

As a side note, vue comes with no guarantee that it will play well with any libraray that mutates the DOM. The user who uses such a lib is responsible for managing it, and the lifecycle hooks are the best place to do such things.

这篇关于Vuex 存储“strict: true"不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！