Make component react to data change in state

Question

I have the following layout of my vue app:

App.vue

<template>
  <div id="app">
    <Progress />
    <router-view />
    <Footer />
  </div>
</template>
<script>
import Footer from "@/components/Footer";
import Progress from "@/components/Progress";

export default {
  components: {
    Footer,
    Progress,
  },
};
</script>

Code snippet for progress bar:

<template>
  <section>
    <div class="columns is-mobile pt-6" v-show="progressBar()">
      <div class="column is-three-fifths is-offset-one-fifth">
        <progress
          class="progress is-success"
          :value="(progress.count / 9) * 100"
          max="100"
          >{{ (progress.count / 9) * 100 }} %</progress
        >
      </div>
    </div>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "Progress",
  methods: {
    progressBar() {
      console.log(this.progress.status);
      if (this.progress.status == false) {
        return false;
      }
      return true;
    },
  },
  computed: mapGetters({
    progress: "getProgressBar",
  }),
};
</script>

And vuex store for the progressbar.

src/store/modules/ProgressBar.js

const state = {
  count: 1,
  status: false,  
};

const getters = {
  getProgressBar: state => state,
};

const actions = {
};

const mutations = {
  setProgressBar(state, value) {
    state.status = value;
  },
  progressIncrease(state) {
    state.status = state.status + 1;
    console.log(state.status);
  }
};

export default {
  state,
  getters,
  actions,
  mutations,
};

And my route component Basics.vue which loads from the route /basic;

<template>
  /* code for form layout goes here*/
</template>
<script>
export default {
  name: "Basics",
  methods: {
    toNetworks() {
      this.$router.push({ name: "Location" });
      this.$store.commit("progressIncrease");
    },
    /* other codes to handel input */
  },
  created(){
    this.$store.commit("setProgressBar", true);
  }
};
</script>

With the above code I'm trying to increment the variable count in the state as per the form step increases and show the progress bar according to the calculation.

The states are set correctly and I can increment it with the commit. But the progresses bar component is not reacting to the updated data in the state.

I know that mapGetter method is called only once when the <Progress/> component is loaded in the App.vue component.

Is there any method/way to make the <Progress/> react to changes on the data in the state that are made from router component ?

I suggest you to use 2 getters - one to get the count and another to get the status. — IVO GELOV
Isn't state.count = state.count + 1 in here? progressIncrease(state) {state.status = state.status + 1;console.log(state.status);} — Tingsen Cheng

Tony Tony · Accepted Answer · 2020-07-22T13:47:36

In your progressIncrease mutation, you are increasing the wrong state (status - which is a boolean). You will need two getters. Also, I take it your getter should return the status and the count state. You should have

const mutations = {
  progressIncrease(state) {
    state.count = state.count + 1;
  }
};

const getters = {
  count: state => {
    return state.count;
  },
  status: state => {
    return state.status;
  }
}

In the component, you can use mapGetters as follows

computed: {
  ...mapGetters([
    'count',
    'status',
  ])
}

You can replace this.progress.status with "this.status" and "this.progress.count" with "this.count". You can also use aliases if you please. You can see more about getters here

The best practice, though, is to use mapState since you are returning the state and not altering it as in the vue docs example linked above.

That will become

 computed: mapState({
    count: state => state.count,
    status: state => state.status,
 })

You can now call the states as this.count and this.status. Again, you can use an alias if you please. You can find out more about mapState here

Make component react to data change in state

1 Answers