vuejs 2 how to watch store values from vuex when params are used

user_6627292 0
Viewed 5364

How can I watch for store values changes when params are used? I normally would do that via a getter, but my getter accepts a param which makes it tricky as I've failed to find documentation on this scenario or a stack Q/A.

(code is minimized for demo reasons) My store.js :

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

let report = {
    results: [],
};
export const store = new Vuex.Store({
    state: {   
        broken: Object.assign({}, report),    
    },
     results: (state) => (scan) => {
            return state[scan].results
        },
});

vue-component.vue :

computed: {
        ...mapGetters([ 
         'results',
        ]),

    watch: {
        results(){ // How to pass the param ??
            // my callback
        }

So basically I would like to find out how to pass the param so my watch would work.

vuejs2 vuex vue.js
1 Answers

In my opinion, there is no direct solution for your question.
At first, for watch function, it only accept two parameters, newValue and oldValue, so there is no way to pass your scan parameter.
Also, your results property in computed, just return a function, if you watch the function, it will never be triggered.

I suggest you just change the getters from nested function to simple function.

But if you really want to do in this way, you should create a bridge computed properties

computed: {
  ...mapGetters([
    'results',
  ]),
  scan() {

  },

  mutatedResults() {
    return this.results(this.scan);
  },

  watch: {
   mutatedResults() {

   }
  }

}
user_43066620
Related