【Vuex】Store周りのState管理について

Question

Stateの変数はどのように分けていくべきですか

VuexにおけるState管理の設計方針についての質問です。

例えば、会員系のシステムをVueで構築するとします。

・会員がEmailとPasswordを入力してログインを行うためのコンポーネント
・Passwordを忘れた場合に、Emailを入力してパスワードを再設定を行うためのコンポーネント

上記2種類のコンポーネントを作成するとします。
どちらのコンポーネントもEmailの入力値を管理するemailというstateが必要だとします。

例えば、VuexとNuxt.jsで構築するときに、store/user.tsのようなストアを用意しstateの定義を行うとしましょう。

このstore/user.tsは上記2種類のコンポーネント共通で使用するとした場合、
入力値の状態を管理するemailは、ログイン用のemailとパスワード再設定用のemailとで変数は分けるべきでしょうか？

this.$store.state.loginEmail // ログイン用
this.$store.state.reminderEmail  // パスワード再設定用

分けた場合はstateの状態を参照する場合は上記のようになるかと思います。

可能であれば、Vuexを使用する際に注意すべき設計方針等が載っている記事等も併せてご紹介いただけると嬉しいです。

ご回答よろしくお願いします。

Answer 1

個人的にはユーザーの持つ「ログイン用メールアドレス」と「パスワード再設定用メールアドレス」が常に同じ値になるのであれば特別分ける必要は無いように思えます。

単純に同じ値になる変数が2つある意味が薄いように思えるのと、分散させることによって他開発者が混乱してしまったり今後の改修で予期せぬ不具合を招く可能性もあります。