Vue3中data变量无法更新的原因排查及解决方案

为什么初始代码无法更新uid和username？ #

这是因为异步操作的执行顺序问题：

• axios.get 是异步HTTP请求，调用后不会立刻返回结果，而是先把请求任务放到浏览器的异步任务队列里。
• 你在 get_user_info 里先调用 this.require_get('info')，紧接着就执行 this.uid = this.temp['username']，这时候 require_get 里的 then 回调还没触发（异步任务要等当前同步代码执行完才会跑），this.temp 还是初始化的空对象，自然取到的是 undefined。
• 而把赋值代码放到 then 回调里时，是等请求成功拿到数据后才执行，所以能正确更新变量。

为什么async/await写法还是输出undefined？ #

你的 require_get 函数虽然加了 async 关键字，但没有返回axios请求的Promise对象：

• 函数里的 axios.get().then(...) 只是定义了回调，但整个 require_get 函数没有把这个Promise链返回出去，所以函数默认返回 undefined。
• 当你用 await this.require_get('info') 时，等待的是一个 undefined，自然打印出来的 info 就是 undefined。

正确的写法（让赋值代码留在get_user_info里） #

方案1：用async/await规范实现 #

修正 require_get，让它返回请求的Promise结果，同时纠正你代码里的笔误（把uid赋值成username的错误）：

<script>
import axios from 'axios';

export default {
    data() {
        return {
            uid: '',
            username: '',
            loaded: false
        }
    },
    methods: {
        async require_get(url) {
            const token = localStorage.getItem('token');
            const config = {
                headers: {
                    'token': token,
                }
            };
            const _url = 'user/dashboard/' + url;
            // 用await直接获取响应，返回data
            const response = await axios.get(_url, config);
            return response.data;
        },
        async get_user_info() {
            const info = await this.require_get('info');
            console.log(info);
            // 纠正笔误：uid对应info.uid，不是username
            this.uid = info.uid;
            this.username = info.username;
            this.loaded = true;
        }
    },

    mounted() {
        // get_user_info不需要传参数，内部已经传了'info'
        this.get_user_info();
    }
}
</script>

方案2：不用async/await，用Promise.then链式调用 #

如果不想用async/await，也可以让require_get返回Promise，然后在get_user_info里链式调用：

<script>
import axios from 'axios';

export default {
    data() {
        return {
            uid: '',
            username: '',
            loaded: false
        }
    },
    methods: {
        require_get(url) {
            const token = localStorage.getItem('token');
            const config = {
                headers: {
                    'token': token,
                }
            };
            const _url = 'user/dashboard/' + url;
            // 返回axios.get的Promise
            return axios.get(_url, config).then(response => response.data);
        },
        get_user_info() {
            this.require_get('info')
                .then(info => {
                    this.uid = info.uid;
                    this.username = info.username;
                    this.loaded = true;
                })
                .catch(err => {
                    // 别忘了处理请求失败的情况
                    console.error('获取用户信息失败', err);
                });
        }
    },

    mounted() {
        this.get_user_info();
    }
}
</script>

额外提醒 #

• 记得添加请求失败的错误处理（比如catch），避免请求出错时页面无响应。
• 你初始代码里this.uid = this.temp['username']是笔误，应该是this.temp['uid']，修正后才能正确拿到用户ID。

内容的提问来源于stack exchange，提问作者debidong