這兩天在進行一個首頁的制作,結果就碰到了標題上所述的問題了,用了一天的時間在網上查資料。終於找出了問題所在
Vuex的數據寫在store里,在組件中需要用到this.$store.commit() 來調用store中mutations 里面的一些數據處理方法來向后端請求數據。並在computed計算屬性中通過getters來獲取Vuex的數據。
在控制台中查看Vuex獲取后端數據的情況,數據獲取完成並且被getters到組件中,但組件顯示數據居然還是空的。而computed是會自動監聽數據變化進行組件更新的。這里為什么沒有生效呢?
原因當然是因為沒有監聽到數據變化。為什么沒有監聽到數據變化呢?
其實,是由於vue對數組數據的變化只能監聽到以下幾種變化
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
而我在對數據進行賦值的時候是直接用 a[i] = b[i]的方式進行賦值的。如果換成a.push(b[i])那么視圖就會隨着數據的變化而更新了。