Vue monitor store Two ways of data change in


Mode 1
watch: { "$store.state.userInfo.Name":{ handler:function(newVal,oldVal){
console.log(newVal,oldVal); } } }
Mode 2
computed: { isEdit () { return this.$store.state.userInfo.Name;　　// Data to be monitored } },
watch: { isEdit(newVal, oldVal) { console.log(newVal,oldVal); } },
difference

* Difference one ： The second way is to monitor at any time by calculating attributes store Changes in data , Thus trigger isEdit Listening function for , Obviously, one more step is needed
*
Difference 2 ： If listening store The data is an object , The first method only needs to add in-depth monitoring , Data change monitoring can also be realized , The second method can't be monitored store Object data change , for example
The first way
watch: { // At this time, I am listening to the object , When $store.state.userInfo.Name When modification occurs , At this time, deep monitoring is required to monitor data changes
"$store.state.userInfo":{ deep:true,// Depth listening is set to true handler:function(newVal,
oldVal){ console.log(" The data has changed "); // When modifying data , You can see the output console.log(newVal,oldVal); } }
}
The second way
computed: { isEdit () { return this.$store.state.userInfo;　　// Data to be monitored }, },
watch: { isEdit(newVal, oldVal) { console.log(" The data has changed ");
// When modifying data , The output is not visible , Because you can't listen for changes in data console.log(newVal,oldVal); } },

Technology
©2020-2025 ioDraw All rights reserved, Privacy Policy