[Vuejs]-Watch and mutation in vuejs/vuex

by

1👍

✅

In your watch handler, you are calling this.$store.commit when it appears you intend to call this.$store.dispatch(). commit runs a mutation. dispatch runs an action. Your code for calculating the style from the boolean value is in the action, therefore you should use dispatch.

That said, there is no reason to use an action here since you don’t have any asynchronous code. Simply put the logic for the style string inside the mutation instead of in the action.

👤Jason Smith

3👍

you code is invalid. the isXActive inside the watcher is boolean type (like you said in the comment above it) and styleForX from the store is style object type for style the input. now when watcher got trigged you send a boolean type to the mutation and the mutation set the styleForX to boolean type.

you should send a style string not a boolean for example

watch: {
  isXActive: function() {
    this.$store.commit("SET_STYLE_FOR_X", {backgroundColor: "white", zIndex: "51"});
  }
}

example of object style type is { color: 'red' }. this is just js object take a look here for more info https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

👤eli chen

Leave a comment