Wait when variable change status in Vue-CodePudding

How I can run some code when my variable change.

for exaple: $store.state.AppStatus have status "busy" when vue component loaded then he change to "ready"

so i need run boostrap function on tab after $store.state.AppStatus change to "ready"

Now i use setTimeout couse its work but its not perfect...

My code mounted hook:

  mounted() {
    
    if (window.location.hash) {
      console.log(this.$store.state.AppStatus)
       setTimeout(() => {
            $(`a[href="${window.location.hash}"]`).tab('show')
          }, 1000);
      
    }  
  },

CodePudding user response：

You can use a Vue Watcher - https://vuejs.org/v2/guide/computed.html#Watchers

While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.

watch: {
  '$store.state.AppStatus': function() {
    $(`a[href="${window.location.hash}"]`).tab('show')
  }
}