Getters that only update when values have changed

[Vic-Dev]

Currently, if I set a getter for the route name and then use that getter in a computed value in a component, it will be updated whenever the route changes even if the route name property is the same. Eg, for the getter:

currentRouteName: state => state.route.name

Then in a component:

computed: {
    ...mapGetters({
      currentRouteName: 'currentRouteName'
    }),
    routeName() {
      return this.currentRouteName
    }

The reason this is an issue, is that I have a searchbar component I'm dynamically hooking up to a different search store (using vuex-connect) depending on the route name, which triggers the searchbar to be mounted. Currently it is re-mounted whenever the route changes (eg, adding a query param) even though the route name string has not changed. I could fix this by using a watcher and only updating the searchbar when the currentRouteName to is different from the from, but that means that everywhere I want to use this getter I have to use the watcher to check the difference when it seems like it should only reactively update when it actually gets a different string.

[robokozo]

I'm having this problem too. I have a few getters that do some processing based on the url param/query values but it's triggering even when not being changed.

[subev]

Ye this is pretty annoying, the getter should be updated only if the values are different. The issue we have is when we have computed properties that somehow access the anything on the router they are all precomputed although the params are still the same. I believe this should be by default and have an option to behave such forceful way.

[queensGambyte]

Totally need this. Even if DOM is not updated because of this, there is quite a lot of unnecessary computation for Virtual DOM.

I've tested something like this mixin, and it works for views. Can something similar be implemented for store getters also, which depend on router store's state?

'use strict';
const _ = require('lodash');

//Expects 'qPsToCache'.
//Adds '$_qpsManager_cachedQPs', which is updated when 'qPsToCache' is truly updated.

module.exports = {
    data() {
        return {
            $_qpsManager_cachedQPs: {}
        }
    },

    watch: {
        qPsToCache(toQPs, fromQPs) {
            if(!_.isEqual(toQPs, fromQPs)) this.$data.$_qpsManager_cachedQPs = toQPs;
        }
    },

    created() {
        this.$data.$_qpsManager_cachedQPs = this.qPsToCache;
    }
};

[urkle]

This fork provides the functionality of only pushing updates when values change. https://github.com/lukas-tr/vuex-enhanced-router-sync

[gilles-crealp]

@urkle Can't you make a PR to vuex-router-sync to fix this issue?