How to monitor data changes in vuex in vue

The method for vue to monitor data changes in vuex: You can first obtain the data in vuex through the calculated attribute; then use watch to monitor the changes in the value of the calculated attribute, obtain the values ​​before and after the data change, and make corresponding changes processing.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

1. Monitor the data changes of vuex in the vue file

First obtain the data in vuex through calculated properties
Then monitor the calculated properties through watch Value to get changes

<script>
import { mapGetters } from &#39;vuex&#39;
export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(["mapboxMap"]),
    mapboxMap1() {
      // return this.$store.state.mapbox.map;
      return this.mapboxMap;
    }
  },
  watch: {
    mapboxMap1(newData, oldData) {
     
    }
  },
}
</script>

2. How does vue monitor changes in vuex data in non-vue files?

Usually we monitor data changes in vue files, especially data changes in vuex. It is very convenient to use the watch function to get the values ​​before and after the data change, and handle it accordingly. .

However, it is not easy when we need to monitor data changes in files such as js. Fortunately, the vue official website provides solutions

watch(fn: Function, callback: Function, options?: Object): Function
Instance method of vuex, receiving two parameters:
The first parameter is fn, listen to the return value of fn responsively, and call the callback function when the value changes. fn receives the store's state as the first parameter, and its getter as the second parameter;
The second parameter is an optional object parameter representation, similar to the callback function of vue's watch, representing the old and new values.
When we don’t want to listen, we can define a variable to receive the return value function of this method, and call this function to stop monitoring.

Advantages: We can monitor a specific value we need, and get the old and new values ​​very conveniently like in the vue file
Disadvantages: When we need to know the changes of many values You have to write a large number of monitoring methods (you can consider encapsulating them into methods or classes)
Usage example:

/* eslint-disable */
import store from "../store/index";

const watchFun = store.watch(
    state => state.pathName,
    (newValue, oldValue) => {
        console.log("search string is changing");
        console.log("rd: newValue", newValue);
        console.log("rd: oldValue", oldValue);
    }
);

setTimeout(() => {
    watchFun();
}, 10000);

• Introduce store into the corresponding js file

• Call the store's watch instance method. The first function parameter returns a value in the state that needs to be monitored (for example, if I want to monitor the change of pathName in vuex, I will return this value)

• The second parameter is the same as vue's watch, receiving 2 parameters representing the old and new values

• Receive the return value of the watch through the variable watchFun, calling this method will stop monitoring

The above is how to monitor changes in vuex data in non-vue files such as js.

Just like the shortcomings mentioned in the article, when the amount of data is too large, it is unfriendly to write multiple monitors. You can consider subscribing to mutations to manage large amounts of data.

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to monitor data changes in vuex in vue. For more information, please follow other related articles on the PHP Chinese website!