Vuex & Storybook: impossible de définir la propriété réactive sur une valeur non définie, nulle ou primitive: non définie
J'ai un problème lors de l'utilisation de Vuex avec Storybook. J'ai créé une petite application de base en utilisant la Vue CLI et Storybook v5.3 pour illustrer le problème. Le code peut être trouvé à ce dépôt sur github .
Essentiellement, j'essaie de valider les données de champ d'entrée dans mon magasin. Cependant, j'obtiens un avertissement Vuex: "Impossible de définir la propriété réactive sur une valeur non définie, nulle ou primitive: undefined" et un TypeError: "index.js: 47 TypeError: Impossible d'utiliser l'opérateur 'in' pour rechercher 'foo' dans undefined ".
Je ne sais pas pourquoi cela ne fonctionne pas parce que je ne fais vraiment rien de complexe. La seule chose à laquelle je peux penser est que Vue et Vuex ne fonctionnent tout simplement pas bien avec React avec lequel Storybook est développé.
Est-ce que quelqu'un à déjà rencontré cela avant?
À votre santé.
J'ai trouvé des problèmes dans le composant et le magasin sur GitHub. Après les avoir corrigés, j'ai pu l'exécuter sans erreur.
Premièrement, il n'y a pas d'attribut data-index Sur le <input>. Une fois que cela est ajouté, il doit être analysé en un entier afin qu'il puisse être utilisé comme un index de tableau dans la mutation du magasin.
Deuxièmement, l'utilisation de Vue.set() est incorrecte. Les arguments attendus sont:
- Un objet/tableau réactif existant.
- Une propriété/index que vous souhaitez ajouter et être réactif.
- La valeur de la nouvelle propriété/index.
Essayez de changer
Vue.set(state.myData[index], "foo", data);
à
Vue.set(state.myData, index, {"foo": data});
Ne devriez-vous pas utiliser dispatch au lieu de Vue.set dans Vuex? (storeModule.js)