I'm having an issue when using Vuex with Storybook. I have made a little basic app using the Vue CLI and Storybook v5.3 to demonstrate the problem. The code can be found at this repo on github.
Essentially, I'm trying to commit input field data to my store. However, I get a Vuex warn: "Cannot set reactive property on undefined, null, or primitive value: undefined" and a TypeError: "index.js:47 TypeError: Cannot use 'in' operator to search for 'foo' in undefined".
I have no idea why it doesn't work because I'm not really doing anything complex. The only thing I can think of is that Vue and Vuex just don't play well with React which is what Storybook is developed with.
Has anyone come across this before?
Cheers.
I found some issues in the component and store on GitHub. After correcting them I was able to run it without errors.
Firstly, there is no data-index attribute on the <input>. Once this is added, it must be parsed to an integer so it can be used as an array index in the store mutation.
Secondly, the use of Vue.set() is incorrect. The expected arguments are:
Try changing
Vue.set(state.myData[index], "foo", data);
to
Vue.set(state.myData, index, {"foo": data});