情景: 一進(jìn)入首頁就會調(diào)后臺接口去數(shù)據(jù)庫里查詢有沒有數(shù)據(jù),如果有得到數(shù)據(jù)就把它顯示在首頁上。接口無報(bào)錯,且數(shù)據(jù)能打印出來,但是首頁就是沒有展示數(shù)據(jù),無論怎么刷新都不行,進(jìn)入其他頁面在返回時發(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里面對應(yīng)屬性的值。但是值改變了,頁面上的數(shù)據(jù)卻沒變。問題就在這里。無論怎么刷新都不管用!
后來打開之前考下來的其他項(xiàng)目參考,發(fā)現(xiàn)它們在頁面上的data()里面初始化的屬性基本上都是沒有值的。然后我便仿著來,同時在mounted()方法里加上了

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

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

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()快？