在 v-bind 中访问 Vuex答案

【问题标题】：Accessing Vuex in v-bind在 v-bind 中访问 Vuex
【发布时间】：2017-01-22 23:58:06
【问题描述】：

我想从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
      }
    }
  }
}

【问题讨论】：

你会想要开始使用Vuex's getters。
signupForm 是您商店中的对象吗？您需要通过“状态”引用它，如下所示： this.$store.state.formStore... 但是，这可能不起作用，具体取决于该对象的创建方式。它需要是响应式的，并且您可能希望为您所追求的特定属性使用 getter
@ceejayoz 在这种情况下，getter 不会显得矫枉过正吗？我要做的就是在状态值发生变化时更新类
Vue 不知道 Object 的属性是否发生了变化，除非你让它特别响应 (vuejs.org/v2/guide/reactivity.html)。因此，如果 firstName 发生变化，收听 signupForm 不会触发任何事情。您可以将 getter 设置为您关心的属性： name: state => state.formStore.signupForm.errors.firstName
看看你的商店是如何设置的可能会有所帮助

标签： javascript vuejs2 vue.js vuex

【解决方案1】：

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

Here 医生说：

由于现代 JavaScript 的局限性（以及放弃 Object.observe)，Vue 无法检测到属性添加或删除。

我正在动态填充错误对象。事实证明 Vue.js 没有检测到这一点，因此无法对其做出反应。

加上firstName，就可以了：

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

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

【讨论】：