Vuex: невозможно сделать страницу реактивной после извлечения данных через аксиумы при действии

Question

Я пытаюсь сделать так, чтобы при загрузке страницы я хотел отправить запрос axios на мой сервер, а затем получить данные и обновить мои данные. Я загружаю страницу с именем homepage.vue и там у меня есть компонент 'DashboardTop.vue'. У меня включено расширение vue. Я получаю необходимые данные, но мое монтирование или что-то еще не работает. Я скучаю по чему-то, как новичок.

Я пытался выполнить async await запрос axios. вот мой 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));
        },
    }

Я dispatching Действие sectionCounts на моем component как:

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

Answer 1

Вы должны использовать вычисляемое свойство для обновления данных после изменения. Я рекомендую использовать mapState помощник в этих ситуациях. Смотри здесь

import { mapState } from 'vuex';

...some code here...

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