为什么我的计算属性的状态在挂接的钩子中显示为空白,但在其他所有地方都可以?

时间:2018-10-24 12:33:47

标签: vue.js vuex

正如该主题所建议的那样,我在vuex存储中有一个特定项目,该项目将使用mapState放入计算属性部分的组件中。这是它的代码:

computed: mapState({
  orderTitle: state => state.order.bookTitle,
}),

当我在Vue Dev Tools的Vuex部分中对此进行检查时,我可以看到它正在准确地从商店获取数据。

出现问题了。

我有一个输入文本字段,我在上面输入了v-model,并将其与data属性相关联。我想做的是用我从orderTitle得到的store中找到的文本预填充该文本字段。

我尝试通过简单地将计算属性中的值分配给mounted钩子中的data属性来做到这一点。但是,这没有用。

当我尝试通过执行console.log(this.orderTitle)来查看已挂接的挂钩中计算出的属性的值来对其进行故障排除时,它显示为空白。

为什么值会正确显示在Vue Dev Tools中(甚至在我执行$vm0.orderTitle时出现在控制台中),但不会正确显示在已安装的挂钩中?

有什么想法吗?

谢谢!

2 个答案:

答案 0 :(得分:1)

我知道了。我没有在已安装的钩子中执行操作,而是在更新的钩子中执行了该操作,该钩子在Vue instance lifecycle之后会触发(在虚拟DOM重新渲染和修补后)。

答案 1 :(得分:0)

听起来像是“此范围”问题。

尝试

计算:mapState({   orderTitle(状态){     返回state.order.bookTitle   } })