I am interested in monitoring when a mutation is called and updates a status. I have created a component that displays the count of database table rows when an API call is made.
Below is the store I have implemented:
const state = {
opportunity: ""
}
const getters = {
countOpportunity: state => state.opportunity
}
const actions = {
// count opportunity
async totalOpportunity({ commit }) {
const response = await axios.get(count_opportunity)
commit("setOpportunity", response.data)
},
}
const mutations = {
setOpportunity: (state, value) => (state.opportunity = value)
}
I want to display the getter value when this mutation is triggered in another component named Opportunity.vue file. I displayed the database count values in a file named Dashboard.vue
This is how I implemented it:
computed: {
...mapGetters(["countOpportunity"])
},
watch: {},
mounted() {
//do something after mounting vue instance
this.$store.watch(() => {
this.$store.getters.countOpportunity;
});
},
created() {
this.totalOpportunity();
},
methods: {
...mapActions(["totalOpportunity"])
}
My view is structured like this:
<div class="inner">
<h3>{{ countOpportunity }}</h3>
<p>Opportunities</p>
</div>
Even though the API call successfully triggers the mutation and increases the count, my view value does not update (countOpportunity). Can anyone assist me in resolving this issue?