v-bindでのVuexへのアクセス

Question

Vuexストアモジュールの値にv-bindの値でアクセスしたいとします。

<input @blur="validate_field" 
     name="firstName" 
     placeholder="First Name" 
     :class="{fail: this.$store.state.formStore.signupForm.errors.firstName}" 
/> 

これは、次のエラーがスローされます。

TypeError: Cannot read property 'signupForm' of undefined

私は次を追加しようとしている：

computed: { 
    ...mapState({ 
    signupForm: state => state.formStore.signupForm 
    }) 
} 

として失敗した行を置き換える：

:class="{fail: signupForm.errors.firstName}" 

と他のもののパノラマも無駄です。何か案は？

EDITは：反応性にドキュメントを指摘して、コメントで@wesへ

const state = { 
    // data 
    formStore: { 
    // data 
    signupForm: { 
    // data 
     errors: { 
     // NO data 
     } 
    } 
    } 
} 

Answer 1

ありがとう：ここに私の店です。

Here DOCは言う：

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

私は動的エラーオブジェクトを移入されました。 Vue.jsはこれを検出しないため、それに反応することはできません。 firstNameの追加により

は、それが動作：

const state = { 
    // data 
    formStore: { 
    // data 
    signupForm: { 
    // data 
     errors: { 
     firstName: '' <-------- 
     } 
    } 
    } 
} 

レッスンがある：あなたがVueのは、に反応するように期待し、すべてのプロパティが明示的に宣言する必要があります。