在 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}"
/>

这将引发以下错误：

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
      }
    }
  }
}

Answer 1

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

Here 文档说：

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 响应的所有属性都必须显式声明。

在 v-bind 中访问 Vuex

Accessing Vuex in v-bind

javascript

vue.js

vuex

vuejs2