Vuex: Unable to make page reactive after fetching data through axios on action

Question

What I'm trying to do is, on my page load I want to send a axios request to my server and then get the data and update my data. I'm loading a page called homepage.vue and there I have a component 'DashboardTop.vue'. I have vue extension enabled I get the required data but my mount or whatever it is not working. I'm missing something as a beginner.

I've tried doing async await the axios request. here is my store.js:

state : {
        'token' : '',
        pendingOrderCount   : '', 
        processedOrderCount : '', 
        returnOrderCount    : '', 
    },  
    mutations : {
        updateOrderCounts(state, $counts){
            state.pendingOrderCount = $counts.pendingOrderCount;
            state.processedOrderCount = $counts.processedOrderCount;
            state.returnOrderCount = $counts.returnOrderCount;
        }
    },
    actions:{
        async sectionCounts(context){
            await axios.get('/dashboard/sectionCounts')
            .then(response => {
                context.commit('updateOrderCounts',response.data);            
            })
            .catch(err => console.log(err));
        },
    }

I'm dispatching the action sectionCounts on my component as:

        data(){
            return {
                pendingOrderCount   : this.$store.state.pendingOrderCount, 
                processedOrderCount : this.$store.state.processedOrderCount, 
                returnOrderCount    : this.$store.state.returnOrderCount,               
            }
        },  
        mounted(){
            this.$store.dispatch('sectionCounts');
        },  

Answer 1

You have to use computed property to update data after change. I recommend using mapState helper in these situations. See here

import { mapState } from 'vuex';

...some code here...

computed: {
    ...mapState(['pendingOrderCount', 'returnOrderCount', ' processedOrderCount']),
},