vue項目中使用vuex的getter方法，數據更新但沒有觸發頁面重新渲染

vue項目中使用了vuex的getter方法獲取數據，數據更新後頁面沒有渲染

問題描述

在vue的一個項目中遇到這樣一個問題：項目使用vuex進行狀態管理，在一個頁面中，包含兩個組件AB.在A組件中，通過接口請求拿到數據A，並存儲在store中，供調用。在B組件中，我們通過getter的方式，從store中獲取數組A中的部分數據，用做組件頁面的一些數據展示。
問題：當數組A變化時，B組件中,打印數組A已更新，但是沒有觸發頁面重新渲染，組件數據顯示的值還是默認值undefined

原因排查

出現vuex中state及getter狀態變化，但是頁面沒有重新渲染的，考慮以下兩個問題：

1. 是否引入數據是在組件的created鉤子中，這樣getter數據變化，但created已完成，不會重新渲染
2. 是否根據獲取的getter的值，去改動了data(){}中的對象，如果沒有使用this.$set方式，也是不會觸發頁面更新的

爲什麼getter返回的值不是最新獲取的值呢？

總的來說，就是A組件調接口取值，但在此之前B組件已經完成了getter操作了，獲取的是默認值。即B組件在數據返回前已經先取了默認值進行頁面渲染。（可以設個setTimeOut定時器，判斷一下是不是這個原因）

解決辦法

網上關於此類問題的分析和解決辦法有很多：具體可參考此鏈接：https://blog.csdn.net/marendu/article/details/93492642
這裏只記錄下，我由於將賦值寫在created鉤子中，導致後續不會再重新渲染的解決辦法：

在組件中增加watch方法

watch這個通過getter的方式，從store中獲取的字段，假設爲getLists,然後將後續的操作在方法中重寫一遍，保證這個值改變時，重新進行頁面的一些賦值操作，從而觸發頁面重新渲染


如：

  watch: {
    getList (nv) {
      this.abcd = nv;
      this.aaaa.id = nv[0].id
    }
  }