Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to monitor data changes in vuex in vue. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The method of vue listening for data changes in vuex: first, you can obtain the data in vuex by calculating the attribute computed; then, through watch, you can monitor the changes in the values in the calculated attributes, obtain the values before and after the data changes, and deal with them accordingly.

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

1. Listen for vuex data changes in vue files

First, calculate the attributes to get the data in the vuex

Then use watch to listen to the value in the calculation property to get the change.

Import {mapGetters} from 'vuex'export default {data () {return {}, computed: {... mapGetters (["mapboxMap"]), mapboxMap1 () {/ / return this.$store.state.mapbox.map; return this.mapboxMap;}}, watch: {mapboxMap1 (newData, oldData) {},} how does 2.vue listen for changes to vuex data in non-vue files?

Usually we listen to the change of data in vue file, especially the change of data in vuex is very convenient. Through the watch function, we can easily get the value before and after the change of data and deal with it accordingly.

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

Watch (fn: Function, callback: Function, options?: Object): Function

The instance method of vuex, which receives two parameters:

The first argument is fn, which responsively listens for the return value of fn and calls the callback function when the value changes. Fn receives the state of store 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 do not want to listen, we can accept the return value function of the method by defining a variable, and call this function to stop listening.

Pros: we can monitor a specific value we need and easily get the new and old values as in the vue file.

Disadvantages: when we need to know a lot of value changes, we have to write a large number of listening 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 in the corresponding js file

Call the watch instance method of store, and the first function parameter returns a value in the state you need to listen to (for example, if I want to listen for changes in pathName in vuex, I return this value)

The second parameter is the same as the watch of vue. Two parameters are received to represent the old and new values.

The return value of watch is received through the variable watchFun, and calling this method stops listening

As above, this is how to listen for changes in vuex data in non-vue files such as js.

As mentioned in this article, when the amount of data is too large, it is not friendly to write multiple listeners, so you can consider subscribing to mutation to manage a large amount of data.

This is the end of this article on "how to monitor data changes in vuex in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.