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
    }
  }