Watching vuex state change from vuejs component

Question

I am new to both vue.js and vuex. I have a component that need to dispatch an action when a specific data is available in the state. How can I do this.

Example:

export default {
   name: 'MyComponent',
   computed: {
      targetItem() {
         return this.$store.getters.getTarget(this.$route.params.id);
      }
   }
}

In the example above i would like to dispatch a new action on the store when targetItem has a value. This is so i can trigger an ajax request via a vuex action to collect more data about targetItem

Thanks

What have you already tried and what's not working as you expected? — thanksd
Your use-case is very unclear to me. Are you looking for something like in this fiddle? Please add more details to your questions. What are you planning to do with the action? Is it sending an ajax request, does it change state etc.? — AWolf

faboulaws faboulaws · Accepted Answer · 2017-08-12T13:09:36

I eventually found a solution that work

export default {
   name: 'MyComponent',
   computed: {
      targetItem() {
         return this.$store.getters.getTarget(this.$route.params.id);
     }
   },
   watch: {
      shop (newVal, oldVal) {
         if(!!newVal && !oldVal) {
            const {targetItem} = this;           
            this.$store.dispatch('ACTION_NAME',{targetItem});
         }
      }
   }
}

Thanks

Watching vuex state change from vuejs component

1 Answers