Vuex 和 Storybook：无法在未定义、空值或原始值上设置反应性属性：未定义

Question

在 Storybook 中使用 Vuex 时遇到问题。我使用 Vue CLI 和 Storybook v5.3 制作了一个基本的应用程序来演示这个问题。代码可以在 github上的这个 repo 中找到。

本质上，我正在尝试将输入字段数据提交到我的商店。但是，我收到 Vuex 警告：“无法在未定义、空值或原始值上设置反应性属性：未定义”和类型错误：“index.js:47 类型错误：无法使用 'in' 运算符在未定义中搜索 'foo' ”。

我不知道为什么它不起作用，因为我并没有真正做任何复杂的事情。我唯一能想到的就是 Vue 和 Vuex 不能很好地与 React 配合使用，而 React 正是使用 Storybook 开发的。

有没有人遇到过这个？

干杯。

Answer 1

我在组件中发现了一些问题并存储在 GitHub 上。在更正它们之后，我能够毫无错误地运行它。

首先，上没有data-index属性<input>。添加后，必须将其解析为整数，以便将其用作存储更改中的数组索引。

其次，使用Vue.set()不当。预期的参数是：

尝试改变

Vue.set(state.myData[index], "foo", data);

到

Vue.set(state.myData, index, {"foo": data});