v-bind에서 Vuex 액세스

v-bind에서 Vuex 액세스

다음에서 값에 액세스하고 싶다.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}"

그리고 다른 모든 것들도 허사였다.좋은 생각 있어요?

편집: 내 스토어는 다음과 같습니다.

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

리액티브에 관한 문서를 지적해 주신 @wes 코멘트 덕분입니다.

여기서 의사는 말합니다.

최신 JavaScript의 제한(및 Object.observe의 포기) 때문에 Vue는 속성 추가 또는 삭제를 검출할 수 없습니다.

에러 오브젝트를 동적으로 입력했습니다.Vue.js는 이를 검출하지 못해 대응할 수 없는 것으로 나타났습니다.

의 추가에 의해firstName동작:

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

Vue가 반응할 것으로 예상되는 모든 속성은 명시적으로 선언해야 합니다.

언급URL : https://stackoverflow.com/questions/41797514/accessing-vuex-in-v-bind