Watch and mutation in vuejs/vuex

Question

So I managed to get to watch an element from state but I want also to update an element from state.

This is what I tried but it doesn't seam to work:

<template>
  <input :style="styleForX" ... />
</template>


// script in template file :: isXActive returns focus input = true/false
 watch: {
  isXActive: (isXActive) => {
    console.log(123);
    this.$store.commit("SET_STYLE_FOR_X", isXActive);
  },
},
computed: {
  ...mapGetters([
    "styleForX",
]);


// state.js
export default state = {styleForX: ""}

// getters.js
styleForX: (state) => {
  return state.styleForX;
},

// action.js
SET_STYLE_FOR_X({commit}, isXActive) {
  const style = isXActive? {backgroundColor: "white", zIndex: "51"} : "";
  commit("SET_STYLE_FOR_X", style);
},


// mutation.js
SET_STYLE_FOR_X(state, styleForX) {
  state.styleForX= styleForX;
}

Every js file has the export default statement. Any idea how should I make it work?

1. Update:

Changed code to:

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

but still doesn't work. I get this as undefined , so I get this error:

Error in callback for watcher "isXActive": "TypeError: Cannot read property '$store' of undefined" found in ...

2. Update - I changed it to this and this works. But still if anyone knows how to make the first version work please drop a comment. Thank you!

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

3. Update - because the style was not remove on focus out I changed it again to:

created() {
  this.$store.watch(
    () => this.$store.state.isXActive,
    () => {
      this.$store.dispatch("SET_STYLE_FOR_X", isXActive);
    }
  );
}

// action.js
SET_STYLE_FOR_X({commit}, isXActive) {
  const style = isXActive? {backgroundColor: "white", zIndex: "51"} : "";
  commit("SET_STYLE_FOR_X", style);
},

4. Update - end result

 watch: {
  isXActive() {
    this.$store.commit("SET_STYLE_FOR_X", this.$store.state.isXActive);
  },

Thank you eli chen !!

Answer 1

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

Answer 2

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.