Vuex 状态数据没有持久化？答案

【问题标题】：Vuex State data is not persisting?Vuex 状态数据没有持久化？
【发布时间】：2019-11-25 07:31:38
【问题描述】：

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

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
}

然后我在各自components 的created method 的两个不同组件中调用getStats 和getUsers actions。

问题是 getStats 和 setStats 被执行但它没有设置数据，但 getUsers 和 setUsers 正在按预期工作。

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>

我还附上了显示vue js dev tools 的图片，显示vuex 的数据以状态存储但未显示。

edit-1：

setStats-after console.log

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

Edit-2：

vuex bindingwidgets components

Edit-3：

存储/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>

任何帮助将不胜感激。

谢谢。

【问题讨论】：

console.log(data) 在setStats() 中的结果是什么？ data 是否有预期值？另外，您如何尝试显示数据？你在使用computed 属性吗？
我已经用你评论的答案更新了我的问题
@glitch 它正在显示正确的数据
您是否使用computed 属性来显示数据？
@SalmanZafar 我再次请求您创建一个沙箱，运行您的代码，重现问题并在此处分享。 Michal 已经分享了 2 个运行良好的代码示例。您不能指望人们复制您的代码并复制您的问题。复制问题并在您的问题中分享是您的工作。

标签： vue.js vuejs2 vuex vuex-modules

【解决方案1】：

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

【讨论】：

他是对的 - 这不是问题，因为来自 mapGetters 的 getter 只是他正在使用的计算属性。在这种情况下，您不需要传播运算符....

【解决方案2】：

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

【讨论】：

不幸的是它仍然不是同样的问题

【解决方案3】：

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

代替：

<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>

【讨论】：

还是同样的问题