Vuex状态数据不持久？

Question

我正在vuejs中的管理面板上工作，并使用vuex进行状态管理。

商店/模块/家庭/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
}

然后我分别在getStats的{​​{1}}中的两个不同组件中调用getUsers和actions created method。

问题是执行了components和getStats但未设置数据，但是setStats和getUsers正常工作。

src / components / layouts / Widgets.vue：

setUsers

我还为<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> 附加了vue js dev tools的图像，其中数据已存储但未显示。

edit-1：

setStats-console.log之后

vuex

编辑2：

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

编辑3：

Store / index.js：

widgets components

sr / main.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

  }
});

src / components / layout / Main.vue：

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');

任何帮助将不胜感激。

谢谢。

Answer 1

您忘记在“ mapGetters”，“ ... mapGetters”之前添加“ ...”

Answer 2

我认为您的问题可以通过在Vuex中实现严格模式来解决，顺便说一句，默认情况下它已关闭。 在这里看看：https://vuex.vuejs.org/guide/strict.html

Answer 3

您是否尝试过使用mapState而不是mapGetters？由于您的值只是在更新，但是您的获取器不是计算值，它们只是映射到您的状态。

代替：

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

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

也许尝试：

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

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