在 Vuex 的状态下动态创建反应式数组

Question

我的组件想向 SST (vuex) 添加一个新的反应式数组字段。我在 beforeCreate 钩子中尝试过，但添加的数组不是响应式的；它只是一个普通的 JS 数组。

请注意，这与在 Vue 初始化时创建的现有数组中添加/删除元素不同。这样的数组被“包装”并按预期变得反应，注意“数组更改检测”陷阱。

就我而言，我正在尝试向 SST 动态添加一个全新的数组类型字段，并同时使其具有反应性。可能的？

Answer 1

深入了解反应性 - 更改检测注意事项：

变更检测注意事项

由于现代 JavaScript 的限制，Vue 无法检测属性的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此data对象中必须存在一个属性，以便 Vue 转换它并使其具有反应性。

但是你说你正在动态添加一个数组：

我正在尝试向 SST 动态添加一个全新的数组类型字段，并同时使其具有反应性。可能的？

从文档（粗体是我的）：

Vue 不允许向已创建的实例动态添加新的根级响应式属性。但是，可以使用以下Vue.set(object, key, value)方法向嵌套对象添加反应性属性：

Vue.set(vm.someObject, 'myArrayName', [1,2,3]);

这应该可以帮助您使数组具有反应性。