How to avoid vuex hyper-reactivity?

Question

JavaScript

I have a property in vuex that is set to the page width on the resize event. There is also a property with a set of breakpoints for each section of the site (an object with keys corresponding to sections of the site, each key corresponds to an array of breakpoints). Based on these properties, the getter returns an object with the current breakpoints for each section of the site. Well, further, on the basis of this getter, many other properties are calculated in different components.
I suddenly realized that reactivity in vue does not always work the way I would like it to. It turns out that when the getter calculates an object with current breakpoints, it returns a new object each time and other properties that depend on this getter also begin to be recalculated again, even if, in fact, all the values ​​in the object that the getter gave remained the same. As a result, when the window is resized, the site lags like that.
I see the solution to this problem in not using a getter, but instead to monitor the screen resolution changes myself and overwrite the object with the current breakpoints only when it actually changed. And in general, apparently the same principle should be applied to any calculated properties that return objects or arrays, on the basis of which a large number of calculations can occur. But this destroys all the beauty and declarative benefits of getters and computed properties. Maybe you can somehow make it clear to vuex that the result of the getter calculation has not changed and you can use the previous result?

Answer 1

Are you recalculating breakpoints for resizing? This is darkness.
Try using matchMedia Brikopoints like
these play well with reactivity. Checked.
Using the example of one point (in App.mounted()):

const mqDesktop = window.matchMedia('(min-width: 992px)');
const mqMobile  = window.matchMedia('(max-width: 991px)');
mqDesktop.addListener(e => { if (e.matches) this.setBreakpoint('desktop');});
mqMobile.addListener(e => { if (e.matches) this.setBreakpoint('mobile'); });
if (mqDesktop.matches) this.setBreakpoint('desktop');
if (mqMobile.matches) this.setBreakpoint('mobile');

Here this.setBreakpoint()is a mutation of the view.