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

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

编辑：这是我的商店：

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

Answer 1

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

文件说

Here：

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

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

添加firstName后，就可以了：

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

经验教训是：您希望Vue做出反应的所有属性必须明确声明。

在v-bind中访问Vuex

1 个答案: