javascript - vuex中使用ajax的话如何维护状态？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

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

高洛峰 2017-04-11 11:48:43

[JavaScript讨论组]

496

例如，我在初始化状态的时候，在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');
        });
};

父组件：

...

子组件：

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是空的字符，那我要怎么保证初始化组件的时候获取到的数据是异步获取的数据？

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(1)

PHPz2017-04-11 11:50:43 1楼

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

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

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

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

也可以設置一個 flag 例如：

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

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>