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

Question

例如，我在初始化状态的时候，在action里面写了一个函数异步去获取初始化数据然后初始化vuex的状态，但是这样子的话我在组件里面就获取不了这个状态了，代码:actions父组件：子组件：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是空的字符，那我要怎么保证初始化组件的时候获取到的数据是异步获取的数据？

Answer 1

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

// 根據你代碼推斷，不一定正確 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 之類的