What is the workaround for value changes not being observed in Vuex?

Below I will share with you a solution based on the inability to observe value changes in Vuex. It has a good reference value and I hope it will be helpful to everyone.

When crossing the main routing view, since the status value of Vuex is always stored in the memory, when the component view is reloaded, the component may not be able to detect the change of the status value, causing business logic to appear. mistake.

Assume that the general header component has a global task status value, and other components must be updated based on this task value. The more likely situation is that the task status value is loaded asynchronously, so it needs to be written like this Business logic:

computed : {
 task () {
  return this.$store.state.task
 } 
},
watch : {
 task : {
   deep: true,
   handler (val) {
    // 由于是异步载入，所以只能在状态值的变化时执行渲染操作
    // 绝不可在mounted中执行render方法
    this.render(val)
   }
 } 
}

However, due to the above reasons, when the view is loaded for the first time, because the Vuex state value has not been stored in the memory, the rendering is normal. After the view switch 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. To force the task value to change, the method is to define a timestamp. If you feel that the granularity of the timestamp is still too coarse, you can also use a combination of random numbers, as follows:

watch: {
 taskId : {
   handler (val) {
    // 从v-model获取到的新值
    let taskId = this.taskId
    // 提交新值变化
    this.$store.commit(TASK_ID, 
    {
     id : taskId,
     // 添加时间戳
     time : Date.now().valueOf(),
     // 添加随机数
     random : Math.random()
    })
   }
 }
}

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

The difference between document.write and document.writeln in js

The relationship between prototype and __proto__ in Javascript Detailed explanation

Node.JS loops to delete all files in non-empty folders and subdirectories

The above is the detailed content of What is the workaround for value changes not being observed in Vuex?. For more information, please follow other related articles on the PHP Chinese website!