web-dev-qa-db-ja.com

Vuex＆Storybook：未定義、null、またはプリミティブ値にリアクティブプロパティを設定できません：未定義

StorybookでVuexを使用すると問題が発生します。 Vue CLIとStorybook v5.3を使用して問題を示すために、少し基本的なアプリを作成しました。コードは githubのこのリポジトリ にあります。

基本的に、入力フィールドのデータをストアにコミットしようとしています。ただし、Vuex警告が表示されます：「未定義、null、またはプリミティブ値にリアクティブプロパティを設定できません：undefined」とTypeError：「index.js：47 TypeError： 'in'演算子を使用してundefinedの 'foo'を検索できません」.

私は本当に複雑なことを何もしていないので、なぜそれが機能しないのか分かりません。私が考えることができる唯一のことは、Vueであり、VuexはReactでうまく機能しないだけです。これはStorybookで開発されたものです。

誰かがこれに遭遇したことがありますか？

乾杯。

vue.jsvuexstorybook
2
dbanks

コンポーネントとGitHubのストアに問題が見つかりました。それらを修正した後、エラーなしで実行することができました。

まず、_data-index_に_<input>_属性がありません。これを追加したら、整数に解析して、ストアの変更で配列インデックスとして使用できるようにする必要があります。

第二に、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-set

3
Jon Frost

VuexでVue.setの代わりにdispatchを使用するべきではありませんか？ （storeModule.js）

0
Reinier Kaper