vue一進(jìn)入頁面或者刷新頁面調(diào)接口得到數(shù)據(jù)，但是卻沒有在頁面上顯示出來這是為什么呢？

情景: 一進(jìn)入首頁就會(huì)調(diào)后臺(tái)接口去數(shù)據(jù)庫里查詢有沒有數(shù)據(jù),如果有得到數(shù)據(jù)就把它顯示在首頁上。接口無報(bào)錯(cuò),且數(shù)據(jù)能打印出來,但是首頁就是沒有展示數(shù)據(jù),無論怎么刷新都不行,進(jìn)入其他頁面在返回時(shí)發(fā)現(xiàn)有數(shù)據(jù)了。懷疑與生命周期有關(guān)。
一開始在首頁的data()里面是這樣定義username屬性的:

username: this.$store.state.user.username === '' ? '游客' : this.$store.state.user.username

然后在mounted()里面diapatchstore里面的actions,在actions里面調(diào)接口并得到返回值,然后在mutations里改變state里面對(duì)應(yīng)屬性的值。但是值改變了,頁面上的數(shù)據(jù)卻沒變。問題就在這里。無論怎么刷新都不管用!
后來打開之前考下來的其他項(xiàng)目參考,發(fā)現(xiàn)它們?cè)陧撁嫔系?code>data()里面初始化的屬性基本上都是沒有值的。然后我便仿著來,同時(shí)在mounted()方法里加上了

this.username = this.$store.state.user.username

結(jié)果仍然沒有。
然后放棄了在actions里面調(diào)后臺(tái)接口的想法,照著之前那位高仿餓了么的大神的寫法在頁面上直接調(diào)后臺(tái)接口:

getUserInfo(this.$store.state.user.userid).then(res => {
  console.log(res)
  if (res.data.success) {
    this.$store.state.user.username = res.data.data.username
    this.$store.state.user.phone = res.data.data.phone
    this.username = this.$store.state.user.username
  }
})

搞定了。
至于原理我就有點(diǎn)不大了解了,只能來社區(qū)問了。一開始想著是不是生命周期的原因，但是我代碼寫在mounted()里面難道不比data()快？