vuex中使用ajax的话如何维护状态？

例如，我在初始化状态的时候，在action里面写了一个函数异步去获取初始化数据然后初始化vuex的状态，但是这样子的话我在组件里面就获取不了这个状态了，代码:

actions

export const initInfo = ({ dispatch }) => {
    Vue.http.get('https://api.xxx.com/info')
        .then((response) => {
            dispatch('INIT_INFO', response.data);
        },(response) => {
            console.log('fail');
        });
};

父组件：

<template lang="html">
    <div id="profile">
        <Avatar
            id="avatar"
            :src="getUserInfo.avatar_url"></Avatar>
    </div>
</template>
...
<script>
export default {
    store,
    vuex: {
        actions: {
            initInfo,
        },
        getters: {
            getUserInfo
        }
    },
    created() {
        this.initInfo();
    },
    components: {
        Avatar
    },
}
</script>

子组件：

<template lang="html">
    <div class="image-fade"
         id="{{ id }}"
         :style=" loaded ? {
                backgroundImage: `url('${src}')`,
                opacity: 1
             } : {} ">

    </div>
</template>

<script>
export default {
    data() {
        return {
            loaded: false,
            img: ''
        }
    },
    props: ['id', 'src'],
    created() {
        console.log(this.src);
    }
}
</script>

mutations:

INIT_INFO(state, data) {
    state.username = data.login;
    state.name = data.name;
    state.bio = data.bio;
},

getters:

export const getUserInfo = (state) => {
    return state;
}

刚开始这个src是空的字符，那我要怎么保证初始化组件的时候获取到的数据是异步获取的数据？

---

既然你用異步來取得資料，你就必須有個預期狀態，那透過這個狀態來決定是否顯示組件，例如你上面的

// 根據你代碼推斷，不一定正確
cosnt state = {
    username: "",
    name = "",
    bio = "",
}

那你就可以根據 username 是否為空值來決定當前是什麼狀態，例如顯示 Loading...

<template lang="html">
    <div id="profile">
        <Avatar
            v-if="getUserInfo.username !== null"
            id="avatar"
            :src="getUserInfo.avatar_url"></Avatar>
        <h1 v-else>Loading...</h1>
    </div>
</template>

也可以設置一個 flag 例如：

// 根據你代碼推斷，不一定正確
cosnt state = {
    isFetching: false
    username: "",
    name = "",
    bio = "",
}

就可以依據 isFetching 來決定當前狀態，這樣就可以保證組件被建立時，是有數據的。

補充：v-if 在 directive 的優先序算是最高，所以不用擔心會先傳值 :src 之類的