Vue-Firebase中Action的Commit作用域问题咨询

这问题核心在于异步代码的执行顺序，我给你拆解得明明白白：

原代码的问题 #

Firebase的db.collection("rooms").get()是一个异步Promise操作——它不会卡住代码等着数据返回，而是立刻继续执行后面的代码。

你可以这么理解：

• 你跟Firebase说：“帮我去把rooms的数据取过来”
• 结果你不等它取回来，转身就喊“把空的rooms数组存到Vuex里”
• 这时候rooms数组确实是空的，因为Firebase还没把数据给你呢！

原代码的实际执行顺序是：

1. 初始化空数组rooms
2. 发起Firebase数据请求（后台异步跑，不阻塞后续代码）
3. 立刻执行commit('SET_ROOMS', rooms)（此时rooms还是空数组）
4. 过一会儿Firebase请求完成，才开始把数据push到rooms里——但这时候commit早就执行完了，Vuex状态根本没拿到有效数据

修改后的正确逻辑 #

把commit移到then回调内部，就相当于给代码加了个“等待指令”：“等Firebase把数据拿回来、把所有room都塞进数组之后，再去更新Vuex状态”。

执行顺序变成了：

1. 初始化空数组rooms
2. 发起Firebase数据请求（后台异步跑）
3. 等Firebase请求成功，遍历拿到的所有文档，把数据逐个push到rooms里
4. 现在rooms已经有完整数据了，再执行commit('SET_ROOMS', rooms)，Vuex状态就能正确更新

简单总结：异步操作的结果只能在它的回调（或者用async/await语法）里处理，否则你拿到的永远是还没被填充的初始值。

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