vue-cli项目，npm run dev 打开地址显示数据为undefined ，但是在修改文件触发热更新后，数据又能拿到

Question

vue-cli项目，npm run dev 打开地址显示数据为undefined(刷新浏览器一样显示数据为undefined) ，但是在修改文件(比如添加个无效的空格)触发热更新后，数据又能显示。之后再刷新浏览器后数据又找不到了。

直接刷新浏览器的截图（说明请求是能拿到的）：

触发热更新后的截图（可以看到两次获取的对象内容不一样）：

api.js：

import Vue from 'vue';
var config = require('../../config')
var url = process.env.NODE_ENV !== 'production' ? '/api/' : config.build.assetsPublicPath + config.build.assetsSubDirectory + '/api/'
export default{
    /*获取首页数据*/
    getIndexData: function (cb) {
        return new Promise((resolve, reject) => {
            Vue.http.jsonp(url+'index/index/index_get_jsonp').then(function (res) {
                if (res.data.code >= 200 && res.data.code < 300) {
                    cb(res.data.data)
                    resolve(res.data.data)
                    console.log(res.data.data);
                }
            }).catch((error) => {
                reject(error)
            })
        })
    }
}

vuex/module/index.js:

import * as types from '../mutation-types'
import api from '../api'
const state = {
    indexData:{}
}
const actions = {
    getIndexData :function({commit}){
        return api.getIndexData(function(res){
            commit(types.INDEX_GET_DATA,res);
        })
    }
}
const getters = {
    getIndexData:state =>state.indexData
}
const mutations = {
    [types.INDEX_GET_DATA](state,res){
        state.indexData = res
    }
}
export default{
    state,
    actions,
    getters,
    mutations
}

index.vue内：

<template>
    <div class="home-container">
            <common :commonData = "indexData.common_data">
            <floors :floorsData="indexData.recommend_product"></floors>
        </common>
    </div>
</template>

<script>
    import common from '../../components/common/common.vue'
    import Floors from '../../components/home/floor.vue'
    import {mapGetters} from 'vuex'
    import store from '../../vuex/store'
    export default {
         data(){
             return{
                 ...
             }
         },
        computed:{
            ...mapGetters({
                indexData: 'getIndexData'
            })
        },
        components: {
            ...
        },
        mounted:function() {
            this.$store.dispatch('getIndexData');
            console.log(this.indexData);
        }
    }
</script>

Answer 1

这样：

watch:{
    indexData:function(val){
        //do method again
    }
},
computed:{
    ...mapGetters({
        indexData: 'getIndexData'
    })
}