Vuex State data is not persisting?

I’m working on admin panel in vuejs and using vuex for state management.

store/module/home/home.js:

import instance from "../../../services/Http";


const state = {

    usersCount: 0,
    customersCount: 0,
    chefsCount: 0,
    driversCount: 0,
    Users: [],
};

const getters = {
    Userscount: state => state.usersCount,
    Customerscount: state => state.customersCount,
    Chefscount: state => state.chefsCount,
    Driverscount: state => state.driversCount,
    users: state => state.Users,
};

const actions = {

    getStats({commit})
    {
        instance.get('admin/stats').then(res => commit('setStats', res.data));
    },

    getUsers({commit})
    {
        instance.get('admin/users').then(res => commit('setUsers', res.data));
    }
};

const mutations = {
    setStats:(state, data) => {
        state.usersCount = data.usersCount;
        state.customersCount = data.customersCount;
        state.chefsCount = data.chefsCount;
        state.driversCount =  data.driversCount;
    },

    setUsers:(state, data) => { state.Users = data.users}
};

export default {
    state,
    getters,
    actions,
    mutations
}

and then i’m calling getStats and getUsers actions in two different components in created method of respective components.

The issue is that getStats and setStats is executed but it does not set the data, but getUsers and setUsers is working as expected.

src/components/layouts/Widgets.vue:

<template>
    <!-- Widgets  -->
    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-five">
                        <div class="stat-icon dib flat-color-1">
<!--                            <i class="pe-7s-cash"></i>-->
                            <i class="pe-7s-users"></i>
                        </div>
                        <div class="stat-content">
                            <div class="text-left dib">
                                <div class="stat-text"><span class="count">{{ Userscount }}</span></div>
                                <div class="stat-heading">Total Users</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-five">
                        <div class="stat-icon dib flat-color-2">
<!--                            <i class="pe-7s-cart"></i>-->
                            <i class="pe-7s-users"></i>
                        </div>
                        <div class="stat-content">
                            <div class="text-left dib">
                                <div class="stat-text"><span class="count">{{ Chefscount }}</span></div>
                                <div class="stat-heading">Total Chefs</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-five">
                        <div class="stat-icon dib flat-color-8">
<!--                            <i class="pe-7s-browser"></i>-->
                            <i class="pe-7s-users"></i>
                        </div>
                        <div class="stat-content">
                            <div class="text-left dib">
                                <div class="stat-text"><span class="count">{{ Customerscount }}</span></div>
                                <div class="stat-heading">Total Customers</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-five">
                        <div class="stat-icon dib flat-color-4">
                            <i class="pe-7s-users"></i>
                        </div>
                        <div class="stat-content">
                            <div class="text-left dib">
                                <div class="stat-text"><span class="count">{{ Driverscount }}</span></div>
                                <div class="stat-heading">Total Drivers</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Widgets -->
</template>

<script>
    import {mapActions,mapGetters} from 'vuex';

    export default {
        name: "Widgets",
        created() {
            this.getStats();
        },
        computed: mapGetters(['Userscount','Customerscount','Chefscount','Driverscount']),
        methods:{
            ...mapActions(['getStats'])
        },
    }
</script>

i have also attached images showing of vue js dev tools for vuex that data is stored in state but it is not being displayed.

enter image description here

enter image description here

setStats-after console.log

{usersCount: 12, customersCount: 4, chefsCount: 7, driversCount: 0, postsCount: 22}chefsCount: 7customersCount: 4driversCount: 0postsCount: 22usersCount: 12__proto__: Object

vuex binding widgets components

enter image description here

Store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import auth from "./modules/auth/auth";
import home from "./modules/home/home";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    auth,
    home

  }
});

sr/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!store.getters.isLoggedIn)
    {
      next({
        name: 'login',
      })
    }
    else
    {
      next();
    }
  }
  else if(to.matched.some(record => record.meta.Visitor)) {
    if (store.getters.isLoggedIn)
    {
      next({
        name: 'home',
      })
    }
    else
    {
      next();
    }
  }
  else
  {
    next()
  }
});

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app');

src/components/layout/Main.vue:

<template>
    <div class="Main">
        <SideBar/>
        <div id="right-panel" class="right-panel">
            <Header/>
            <!-- Content -->
            <div class="content">
                <div class="animated fadeIn">
                    <Widgets/>
                    <div class="clearfix"></div>
                    <Users/>
            <div class="clearfix"></div>
            <Footer/>
        </div>
    </div>
</template>

<script>
    import SideBar from "./SideBar";
    import Header from "./Header";
    import Footer from "./Footer";
    import Widgets from "./Widgets";
    import Users from "../users/Users";

    export default {
        name: "Main",
        components: {Users, Widgets, Footer, Header, SideBar}
    }
</script>

<style scoped>
    #weatherWidget .currentDesc {
        color: #ffffff!important;
    }
    .traffic-chart {
        min-height: 335px;
    }
    #flotPie1  {
        height: 150px;
    }
    #flotPie1 td {
        padding:3px;
    }
    #flotPie1 table {
        top: 20px!important;
        right: -10px!important;
    }
    .chart-container {
        display: table;
        min-width: 270px ;
        text-align: left;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #flotLine5  {
        height: 105px;
    }

    #flotBarChart {
        height: 150px;
    }
    #cellPaiChart{
        height: 160px;
    }
</style>

Any help will be appreciated.

Thanks.

1 Like