In my Vue application, I have the following layout:
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><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 progress bar.
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,
};/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 handle input */
},
created(){
this.$store.commit("setProgressBar", true);
}
};
</script>With the above setup, I am trying to increment the variable count in the state as the form steps increase and show the progress bar accordingly.
The states are being set correctly and I can increment it with the commit. However, the progress bar component is not reacting to the updated data in the state.
I am aware that the mapGetter method is called only once when the <Progress/> component is loaded in the App.vue component.
Is there a method or way to make the <Progress/> react to changes on the data in the state that are made from the router component?