title: Vuex State data is not persisting?
body: <p>I'm working on admin panel in <code>vuejs</code> and using <code>vuex</code> for state management.</p>
  
  <p><strong>store/module/home/home.js:</strong></p>
  
  <pre><code>import instance from "../../../services/Http";
  
  
  const state = {
  
      usersCount: 0,
      customersCount: 0,
      chefsCount: 0,
      driversCount: 0,
      Users: [],
  };
  
  const getters = {
      Userscount: state =&gt; state.usersCount,
      Customerscount: state =&gt; state.customersCount,
      Chefscount: state =&gt; state.chefsCount,
      Driverscount: state =&gt; state.driversCount,
      users: state =&gt; state.Users,
  };
  
  const actions = {
  
      getStats({commit})
      {
          instance.get('admin/stats').then(res =&gt; commit('setStats', res.data));
      },
  
      getUsers({commit})
      {
          instance.get('admin/users').then(res =&gt; commit('setUsers', res.data));
      }
  };
  
  const mutations = {
      setStats:(state, data) =&gt; {
          state.usersCount = data.usersCount;
          state.customersCount = data.customersCount;
          state.chefsCount = data.chefsCount;
          state.driversCount =  data.driversCount;
      },
  
      setUsers:(state, data) =&gt; { state.Users = data.users}
  };
  
  export default {
      state,
      getters,
      actions,
      mutations
  }
  </code></pre>
  
  <p>and then i'm calling <code>getStats</code> and <code>getUsers</code> <code>actions</code> in two different components in <code>created method</code> of respective <code>components</code>.</p>
  
  <p>The issue is that <code>getStats</code> and <code>setStats</code> is executed but it does not set the data, but <code>getUsers</code> and <code>setUsers</code> is working as expected.</p>
  
  <p><strong>src/components/layouts/Widgets.vue:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;!-- Widgets  --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3 col-md-6"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;div class="stat-widget-five"&gt;
                          &lt;div class="stat-icon dib flat-color-1"&gt;
  &lt;!--                            &lt;i class="pe-7s-cash"&gt;&lt;/i&gt;--&gt;
                              &lt;i class="pe-7s-users"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="stat-content"&gt;
                              &lt;div class="text-left dib"&gt;
                                  &lt;div class="stat-text"&gt;&lt;span class="count"&gt;{{ Userscount }}&lt;/span&gt;&lt;/div&gt;
                                  &lt;div class="stat-heading"&gt;Total Users&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-3 col-md-6"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;div class="stat-widget-five"&gt;
                          &lt;div class="stat-icon dib flat-color-2"&gt;
  &lt;!--                            &lt;i class="pe-7s-cart"&gt;&lt;/i&gt;--&gt;
                              &lt;i class="pe-7s-users"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="stat-content"&gt;
                              &lt;div class="text-left dib"&gt;
                                  &lt;div class="stat-text"&gt;&lt;span class="count"&gt;{{ Chefscount }}&lt;/span&gt;&lt;/div&gt;
                                  &lt;div class="stat-heading"&gt;Total Chefs&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-3 col-md-6"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;div class="stat-widget-five"&gt;
                          &lt;div class="stat-icon dib flat-color-8"&gt;
  &lt;!--                            &lt;i class="pe-7s-browser"&gt;&lt;/i&gt;--&gt;
                              &lt;i class="pe-7s-users"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="stat-content"&gt;
                              &lt;div class="text-left dib"&gt;
                                  &lt;div class="stat-text"&gt;&lt;span class="count"&gt;{{ Customerscount }}&lt;/span&gt;&lt;/div&gt;
                                  &lt;div class="stat-heading"&gt;Total Customers&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-3 col-md-6"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-body"&gt;
                      &lt;div class="stat-widget-five"&gt;
                          &lt;div class="stat-icon dib flat-color-4"&gt;
                              &lt;i class="pe-7s-users"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="stat-content"&gt;
                              &lt;div class="text-left dib"&gt;
                                  &lt;div class="stat-text"&gt;&lt;span class="count"&gt;{{ Driverscount }}&lt;/span&gt;&lt;/div&gt;
                                  &lt;div class="stat-heading"&gt;Total Drivers&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /Widgets --&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import {mapActions,mapGetters} from 'vuex';
  
      export default {
          name: "Widgets",
          created() {
              this.getStats();
          },
          computed: mapGetters(['Userscount','Customerscount','Chefscount','Driverscount']),
          methods:{
              ...mapActions(['getStats'])
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>i'have also attached images showing of <code>vue js dev tools</code> for <code>vuex</code> that data is stored in state but it is not being displayed.</p>
  
  <p><a href="https://i.stack.imgur.com/Oaag0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oaag0.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/S0drN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S0drN.png" alt="enter image description here"></a></p>
  
  <p>edit-1:</p>
  
  <p><strong>setStats-after console.log</strong></p>
  
  <pre><code>{usersCount: 12, customersCount: 4, chefsCount: 7, driversCount: 0, postsCount: 22}chefsCount: 7customersCount: 4driversCount: 0postsCount: 22usersCount: 12__proto__: Object
  </code></pre>
  
  <p>Edit-2:</p>
  
  <p><code>vuex binding</code> <code>widgets components</code></p>
  
  <p><a href="https://i.stack.imgur.com/hngMs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hngMs.png" alt="enter image description here"></a></p>
  
  <p>Edit-3:</p>
  
  <p><strong>Store/index.js:</strong></p>
  
  <pre><code>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
  
    }
  });
  </code></pre>
  
  <p><strong>sr/main.js</strong></p>
  
  <pre><code>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) =&gt; {
    if (to.matched.some(record =&gt; 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 =&gt; record.meta.Visitor)) {
      if (store.getters.isLoggedIn)
      {
        next({
          name: 'home',
        })
      }
      else
      {
        next();
      }
    }
    else
    {
      next()
    }
  });
  
  new Vue({
    store,
    router,
    render: h =&gt; h(App)
  }).$mount('#app');
  </code></pre>
  
  <p><strong>src/components/layout/Main.vue:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="Main"&gt;
          &lt;SideBar/&gt;
          &lt;div id="right-panel" class="right-panel"&gt;
              &lt;Header/&gt;
              &lt;!-- Content --&gt;
              &lt;div class="content"&gt;
                  &lt;div class="animated fadeIn"&gt;
                      &lt;Widgets/&gt;
                      &lt;div class="clearfix"&gt;&lt;/div&gt;
                      &lt;Users/&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
              &lt;Footer/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      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}
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      #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;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Any help will be appreciated.</p>
  
  <p>Thanks.</p>