vuejs 快速刷新页面时未执行mutation？

Question

customer主页面

    <template>
    <div class="container">
        <tab>
            <tab-item :selected="index==0" @on-item-click="toggleItem">跟进记录</tab-item>
            <tab-item :selected="index==1" @on-item-click="toggleItem">客户信息</tab-item>
        </tab>
        <swiper :height="pageHeight">
            <router-view></router-view>
        </swiper>
    </div>
</template>

<script>
    import {Tab, TabItem, Swiper, SwiperItem} from 'vux'
    import {mapGetters, mapActions} from 'vuex'
    import * as types from '../vuex/mutation-types'

    export default {
        name: 'customer',
        data() {
            return {
                height: 180,
                index: 0,
                tabs: ['跟进记录', '客户信息']
            }
        },
        computed: {
            ...mapGetters(['currentCustomer', 'clientH']),
            pageHeight() {
                return this.clientH - 44 + 'px'
            }
        },
        methods: {
            ...mapActions([types.GET_CUSTOMER]),
            toggleItem(index) {
                if (index === 0) {
                    this.$router.replace({name: 'followups'})
                } else
                    this.$router.replace({name: 'info'})
            },
            getCustomer(id) {
                this[types.GET_CUSTOMER](id).then(resp => {
                    console.log("客户")
                    console.log(resp)
                    console.log(this.currentCustomer)
                })
            }
        },
        components: {Tab, TabItem, Swiper},
        beforeEnter(to, from, next) {
            console.log("to")
        },
        created() {
            this.getCustomer(this.$route.params.id)
            this.$route.name === "info" ? this.index = 1 : this.index = 0
        }
    }
</script>

<style>

</style>

##customerinfo页面

<template>

<div class="customer-info">
    <div class="loading-box" v-show="loading">
        <p style="text-align:center;padding:15px;">
            <inline-loading></inline-loading>
            加载中...
        </p>
    </div>
    <div v-show="!loading">
        <group v-if="customer" label-width="7rem" label-margin-right="4rem" label-align="right">
            <x-input title="姓名" v-model="customer.name"></x-input>
            <selector title="性别" placeholder="请选择性别" :options="genders" v-model="customer.sex"></selector>
            <cell title="手机1" :value="customer.mobilePhone1"></cell>
            <x-input title="手机2" v-model="customer.mobilePhone2"></x-input>
            <x-input title="固定电话" v-model="customer.telePhone"></x-input>
            <selector title="客户性质" placeholder="请选择客户性质" :options="customerNature"
                      v-model="customer.cstType"></selector>
            <cell title="置业顾问" :value="customer.saleman" is-link></cell>
            <cell title="创建时间" :value="customer.date|formatDate" is-link></cell>
        </group>
        <bottom-menu :menuItems="menus" separator :on-click-item="clickMenuItem"></bottom-menu>
    </div>
</div>

</template>

<script>

import {Cell, Group, Divider, XButton, XInput, Selector, InlineLoading} from 'vux'
import {mapState, mapGetters, mapActions} from 'vuex'
import BottomMenu from './bottom-menu/BottomMenu'
import * as types from '../vuex/mutation-types'

export default {
    name: 'CustomerInfo',
    data() {
        return {
            loading: false,
            customer: {
                id: ''
            },
            backUrl: '',
            menus: [
                {text: '返回'},
                {text: '保存'},
                {text: '更多'}
            ]
        }
    },
    computed: {
        ...mapState(['customerModule']),
        ...mapGetters(['currentCustomer', 'genders', 'customerNature'])
    },
    methods: {
        ...mapActions([types.UPDATE_CUSTOMER]),
        update() {
            this.$vux.loading.show('保存中')
            this[types.UPDATE_CUSTOMER](this.customer).then(() => {
                this.$vux.loading.hide()
                this.$vux.toast.show({text: '保存成功'})
            }).catch(err => {
                this.$vux.loading.hide()
                this.$vux.toast.show({text: err.statusText, type: 'warn'})
                console.log(err)
            })
        },
        clickMenuItem(index) {
            if (index === 0)
                this.$router.go(-1)
            else if (index === 1)
                this.update()
            else
                this.$router.push({name: 'detail', params: {id: this.customerId}})
        }
    },
    components: {Cell, Group, Divider, XButton, XInput, Selector, InlineLoading, BottomMenu},
    created() {
        console.log("客户信息")
        console.log(this.currentCustomer)
        this.customer = Object.assign({}, this.currentCustomer)
    }
}

</script>

<style>

.loading-box {
    text-align: center;
    padding: 1.8rem 1.5rem;
}

</style>

action部分代码

 //获取客户基本信息
    [types.GET_CUSTOMER]({commit}, payload) {
        return new Promise((resolve, reject) => {
            try {
                if (payload) {
                    customerApi.getCustomer(payload)
                        .then(resp => {
                            commit(types.GET_CUSTOMER, resp.data)
                            resolve(resp.data)
                        })
                        .catch(err => {
                            commit(types.EXCEPTION, {message: JSON.stringify(err.response), func: types.GET_CUSTOMER})
                            reject(error)
                        })
                } else {
                    commit(types.EXCEPTION, {message: "customerId is undefined", func: types.GET_CUSTOMER})
                    reject(Error("customerId is undefined"))
                }
            }
            catch (e) {
                commit(types.EXCEPTION, {message: e.message, func: types.GET_CUSTOMER})
                reject(e.message)
            }
        })
    },

mutation部分代码

``

[types.GET_CUSTOMER](state, payload) {
    state.currentCustomer = payload
},

##state代码

import actions from './actions'
import mutations from './mutations'
import {LocalStorage} from "../../../utils"
import storeKeys from '../../storeKeys'

//用户状态管理
const state = LocalStorage.get(storeKeys.customerKey) || {

followups: [],
currentFollowup: {},
customers: [],
currentCustomer: {
    id: '',
    name: '',
    latestFollowup: {},
    extend: {},
    sex: 0,
    mobilePhone1: "",
    mobilePhone2: "",
    telePhone: "",
    status: "",
    date: "",
    projGUID: "",
    cstType: 0,
    salemanGUID: "",
    saleman: "",
    createBy: "",
    createByName: "",
    followCount: 0
}

}

//状态的计算属性
const getters = {

customers: state => state.customers,
currentCustomer: state => state.currentCustomer,
currentFollowup: state => state.currentFollowup,
followups: state => state.followups,
extend: state => state.currentCustomer.extend

}

export default {

state,
getters,
actions,
mutations

}

Answer 1

上代码老铁。。。。

Answer 2

加个loading,让数据先读完再加载视图

Answer 3

没太懂问题在哪里，看你图片意思是执行了commit了，而vue-devtool并没有捕捉到？