Solution to the inability to observe value changes based on Vuex

When crossing the main route view, since the state value of Vuex is always stored in memory, when the component view is reloaded, the component may not detect changes in the state value, resulting in business logic errors.

Assuming that the general header component has a global task status value, other components must be updated based on this task value. It is more likely that the task status value is loaded asynchronously, so business logic needs to be written in this way:

computed : {
 task () {
  return this.$
 } 
},
watch : {
 task : {
   deep: true,
   handler (val) {
    // Since it is loaded asynchronously, it can only perform rendering operations when the state value changes    // Never execute render method in mounted    (val)
   }
 } 
}

However, due to the above reasons, when the view is loaded for the first time, the rendering is normal because the state value of Vuex is not stored in memory. After view switching occurs, although the task status value is reloaded, since the task has not changed, the render method will not be called, so the component cannot complete the rendering process.

The solution is very simple. Forcefully trigger the change of task value. The method is to define a timestamp. If you think the granularity of the timestamp is still too thick, you can also use random numbers in combination, as follows:

watch: {
 taskId : {
   handler (val) {
    // New value obtained from v-model    let taskId = 
    // Submit new value changes    this.$(TASK_ID, 
    {
     id : taskId,
     // Add a timestamp     time : ().valueOf(),
     // Add random number     random : ()
    })
   }
 }
}

After the above processing, as long as the assignment of taskId occurs, the state change of Vuex will definitely be triggered, so every time the component is loaded or the value of taskId changes, the render method will definitely be executed.

in conclusion

In order to meet the value delivery requirements of Vuex, especially when it is necessary to forcefully refresh the cache of Vuex, adding timestamps and random numbers is a good solution.

The above solution to the inability to observe value changes based on Vuex is all the content I share with you. I hope you can give you a reference and I hope you can support me more.