Vue调用store方法返回空Observer对象问题求助

你遇到的情况不是Vue响应性的问题，核心原因是getBuildingsByOwnerRequest是异步操作——你调用它之后立刻打印this.buildings_by_owner时，API请求还没完成，store里的状态还没更新，所以得到的是空数组。第二次调用时，第一次的API请求已经返回并更新了store状态，所以能拿到预期数据。

为什么会这样？ #

getBuildingsByOwnerRequest里的axios.get是异步HTTP请求，它不会阻塞后续代码执行。你调用这个action后，代码会立刻跳到console.log，这时候store的buildings_by_owner还是初始的空数组，自然打印出空的Observer对象（Vue对响应式数组的包装）。

解决方案 #

你需要等待异步请求完成后再访问更新后的状态，有两种常用方式：

方式1：让action返回Promise，用.then处理

修改store里的action，让它返回axios的Promise：

// buildings.js store
actions: {
    getBuildingsByOwnerRequest({ dispatch }, owner_id) {
        // 返回axios请求的Promise
        return axios
            .get(`${process.env.VUE_APP_BASE_URL}/get/buildings_by_owner/owner_id=${owner_id}`)
            .then((res) => {
                dispatch("receiveBuildingsByOwner", res.data);
            });
    },
    // 其他action代码...
}

组件里调用时用.then等待请求完成：

// 组件methods中的函数
fetchBuildings() {
    this.getBuildingsByOwnerRequest(this.editedOwner.owner_id)
        .then(() => {
            console.log(this.buildings_by_owner); // 此时能拿到更新后的数据
        });
}

方式2：使用async/await语法（更简洁）

同样需要action返回Promise（上面的修改已满足），组件里用async/await：

// 组件methods中的函数
async fetchBuildings() {
    await this.getBuildingsByOwnerRequest(this.editedOwner.owner_id);
    console.log(this.buildings_by_owner); // 此时能拿到更新后的数据
}

顺便修正你代码里的小错误 #

1. 组件data里的editedOwner应该用冒号（:）而非等号（=），且返回对象后多了多余逗号：

data() {
    return {
        editedOwner: { // 替换成冒号
            "owner_id": 12223
        }
    } // 去掉此处多余的逗号
}

2. methods里的函数需要命名，不能直接写匿名function()：

methods: {
    ...mapActions("buildings", ["getBuildingsByOwnerRequest"]),
    fetchBuildings() { // 给函数命名
        // 逻辑代码
    }
}

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