vue.js - Vuex & Storybook : Cannot set reactive property on undefined, null，或原始值:未定义

Question

将 Vuex 与 Storybook 一起使用时遇到问题。我使用 Vue CLI 和 Storybook v5.3 制作了一个小基本应用程序来演示这个问题。代码可在 this repo on github 找到.

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

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

有没有人遇到过这个？

干杯。

Answer 1

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

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

其次，使用Vue.set()是不正确的。预期的论点是:

现有的 react 对象/数组。

您要添加并具有反应性的属性/索引。

新属性/索引的值。

尝试改变

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

到

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

https://vuejs.org/v2/api/#Vue-set