Vuex & Storybook: невозможно установить реактивное свойство для неопределенного, нулевого или примитивного значения: неопределенное

Question

У меня проблема при использовании Vuex с Storybook. Я сделал небольшое базовое приложение c, используя CLI Vue и Storybook v5.3, чтобы продемонстрировать проблему. Код можно найти на в этом репозитории на github .

По сути, я пытаюсь зафиксировать данные поля ввода в моем хранилище. Однако я получаю предупреждение Vuex: «Невозможно установить реактивное свойство для неопределенного, нулевого или примитивного значения: undefined» и TypeError: «index. js: 47 TypeError: Невозможно использовать оператор« in »для поиска« foo » в неопределенном ".

Я понятия не имею, почему это не работает, потому что я не делаю ничего сложного. Единственное, о чем я могу подумать, это то, что Vue и Vuex просто не очень хорошо работают с React, для чего и разработан Storybook.

Кто-нибудь сталкивался с этим раньше?

Приветствия.

Answer 1

Я обнаружил некоторые проблемы в компоненте и магазине на GitHub. После исправления я смог запустить его без ошибок.

Во-первых, в <input> отсутствует атрибут data-index. После того, как это добавлено, оно должно быть проанализировано в целое число, чтобы его можно было использовать в качестве индекса массива в мутации хранилища.

Во-вторых, использование Vue.set() некорректно. Ожидаемые аргументы:

1. Существующий реактивный объект / массив.
2. Свойство / индекс, который вы хотите добавить и реагировать.
3. Значение нового свойства / индекса.

Попробуйте изменить

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

на

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

https://vuejs.org/v2/api/#Vue -множество

Answer 2

Разве вы не должны использовать dispatch вместо Vue.set в Vuex? (StoreModule. js)