javascript - 在 v-bind 中访问 Vuex

Question

我想从 v-bind 中的 Vuex 存储模块访问一个值。

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

这会引发以下错误:

类型错误:无法读取未定义的属性“signupForm”

我尝试添加以下内容:

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

并将失败的行替换为:

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

还有一大堆其他的东西，都无济于事。有什么想法吗？

编辑:这是我的商店:

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

Answer 1

感谢@wes 在评论中指出有关 react 性的文档。

Here文档说:

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

我正在动态填充错误对象。原来 Vue.js 没有检测到这一点，因此无法对此使用react。

加上 firstName，它就可以工作了:

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

教训是:您希望 Vue 响应的所有属性都必须显式声明。