Vue、Vuex与Firestore：如何将获取的Firestore数据在前端展示并实现响应式？

Firestore数据已正确绑定至Vuex store，但无法在前端页面正常渲染，根因为Vue响应式规则限制，当前项目依赖版本如下：

• vue: ^3.0.0
• vuex: ^4.0.2
• vuexfire: ^3.2.5

1. 提前声明Vuex state属性 #

Vue3的响应式系统要求所有需要响应式的属性必须在state初始化时提前定义，不可动态追加未声明的顶级属性。你需要在Vuex的state配置中，提前声明对应Firestore集合/文档的存储变量：

• 绑定集合类型数据：提前声明空数组，如 products: []
• 绑定文档类型数据：提前声明空对象，如 userInfo: {}

2. 调整state更新逻辑 #

在Vuex的mutation中更新Firestore绑定数据时，使用全量替换的方式保证响应式不丢失：

// 数组类型数据更新
updateProductList(state, payload) {
  state.products = [...payload]
}

// 对象类型数据更新
updateUserInfo(state, payload) {
  state.userInfo = Object.assign({}, state.userInfo, payload)
}

3. 组件侧正确取值 #

组件中从Vuex读取绑定数据时，必须用computed包裹，不要直接读取state原始值，示例如下：

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
const store = useStore()
// 用computed包裹保证响应式触发
const productList = computed(() => store.state.products)
</script>

<template>
  <div v-for="item in productList" :key="item.id">
    {{ item.name }}
  </div>
</template>

4. 兼容版本升级 #

如果以上操作后问题依然存在，是因为vuexfire 3.x版本对Vue3+Vuex4的响应式适配不完善，可升级到适配Vue3的vuexfire版本，执行安装命令：
npm install vuexfire@next

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