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
– thanksd, Commented Aug 11, 2017 at 20:02
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
– AWolf, Commented Aug 11, 2017 at 21:38

faboulaws · Accepted Answer · 2017-08-12 19:08:54Z

1

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

edited Aug 12, 2017 at 19:08

answered Aug 12, 2017 at 13:09

faboulaws

2,07818 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Watching vuex state change from vuejs component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related