because the company cannot bring out the source code, this problem is described in words here.
in the parent component, there are two sub-components, the upper sub-component is the search bar, and the lower component is the ehcart chart. After selecting the search items, the user clicks search to request data from the backend, and uses watch to listen for the requested data. Once the data is returned, it is immediately stored in the state of vuex. The following echart component also listens to the state,. Once the data changes, call the echart function I encapsulated to render the data. These two components are used in several pages, and the pages are exactly the same, but the interfaces are different and the returned data is different. The
problem arises. It works well on other pages, but the watch snooping event on one of these pages is not triggered. I use vue debugging tool to find that the data in vuex has obviously changed, but the watch event has not been triggered. If you switch back and forth among these juxtaposed pages in succession, this watch event will be triggered occasionally or twice, and page refresh can also be triggered.
Baidu found that if you want to use watch to listen to an array, you need to use deep monitoring, otherwise it will have no effect. But the data returned by my other pages are also arrays, but the field names are different. I don"t know why there is such a problem