vue $store 数据共用问题

kaipizhe
  • 1.3k
...
  mounted: function() {
    console.log(this.$store.state)
    console.log(this.$store.state.app)
    console.log(this.$store.state.app.description)
  }
...

image

this.$store.state 里面明明有 app ;
this.$store.state.app 里面就没了
this.$store.state.app.description 里面也就没了

但是只要动一下页面保存,vue自动加载后就显示了,这个是为什么

this.$store.state是在App.vue里面设置进去的,在组件里面获取

回复
阅读 590
1 个回答
✓ 已被采纳

父子组件生命周期的执行顺序为:
父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted

如果你是在App.vuemounted里面改变的$store数据,那么在子组件的mounted中是拿不到的,所以会打印undefined

至于你说的 this.$store.state 里面明明有 app,这个是浏览器打印问题,如果你在控制台打印一个对象,你没点击展开之前,是正常显示的,但如果你把对象展开了,显示的就是对象被改变后的最终数据了,比如:

mounted () {
   let a = {
      num: 1
   }
   console.log(a);
   a.name = 'test'
}

没展开之前打印的数据是:
image
点击展开之后:
image

宣传栏