VUE 3合成API，传递数据并使其具有反应性 [英] vue 3 composition api, passing data and making it reactive

问题描述

在我的组件中，我有一个简单的选择菜单，其中有两个选项("；all"；和"；Investment"；)。这里的想法是从一个可组合的数组中获取一组数据，并在屏幕上显示这些数据的每一行。如果我选择菜单中的&Quot；All"；，它将显示所有行；如果我选择"；Investment&Quot；，它将筛选数据并仅显示带有obj.link=="；USA"；的数据。

获取数据并将其放入我的组件后，如果我对数据进行Console.log操作，它就能正常工作。如果我在筛选数据后对其进行Console.log操作，则会得到一个空数组。

然后，我尝试在组件中对数据进行硬编码，并测试筛选函数，它工作得很好。因此，错误来自于我获取数据的方式以及我尝试使用这些数据的方式。我曾尝试使用不同的挂钩，如onmount，但未成功。

以下是我的代码的简约示例。 任何建议或建议都非常受欢迎

从我的数据库获取数据的组合如下所示：

import {ref} from 'vue'
import { projectFirestore } from '../firebase/config'
import { collection, getDocs } from "firebase/firestore";

const getActorDocs = () => {
    const actorDocs = []
    const error = ref(null)

const loadActors = async () => {
        try {
            const querySnapshot = await getDocs(collection(projectFirestore, "actors"));
            querySnapshot.docs.map(doc => {
                actorDocs.push(doc.data())
            }) 
        } catch (err) {
            error.value = err.message
            console.log(error.value)
        }
    }

    return { actorDocs, error, loadActors} 
}

export default getActorDocs

我的组件：

<template>
    <div class="col-2">
            <span class="lbl">MA</span>
            <select v-model="selectedMA" class="form-select"  >
                <option value="all">all</option>
                <option value="Investment">Investment</option>
            </select>
    </div>

    <p v-for="obj in actorListTest2" :key="obj" :value="obj"> {{obj}} </p>
<template/>


<script >
import {onMounted, onBeforeMount, ref} from 'vue'
import getActorDocs from '../../composables/getActorDocs'
export default {
setup(){

    const selectedMA = ref("Investment")
    const error = ref(null)
    const {actorDocs, loadActors} = getActorDocs()
    var actorListTest1 = actorDocs
    const actorListTest2 = ref([])
    
    loadActors() // loads actors array into actorDocs
    actorListTest2.value = actorListTest1


    console.log(actorListTest1) // <----- prints correctly (see image below)
    if(selectedMA.value === "all"){
      actorListTest2.value = actorListTest1
    }else{
      actorListTest2.value = actorListTest1.filter(obj => {
        return obj.link == selectedMA.value
      })
    }
    
    console.log(actorListTest2.value)  // <----- prints undefined !
    


    return { error, selectedMA, actorListTest2}
    }//setup
}
</script>

这是console.log(ActorListTest1)的输出：

那么这是console.log(ActorListTest2)过滤后的输出：

推荐答案

这是known problem with console.log，不应用于实时调试对象值。

actorDocs不是被动的，无法在Vue中正确处理异步操作。副作用应该在生命周期挂钩中完成，例如：mounted。

当前状态getActorDocs未准备好与合成API一起使用，因为它被限制为遵循承诺控制流以避免此争用条件：

onMounted(async () => {
    await loadActors();
    console.log(actorListTest2.value);
});

避免这种情况的正确方法是使actorDocs反应数组或ref：

const actorDocs = reactive([]);

如果需要在副作用中访问筛选的值，例如console.log，这将在观察器中完成

const actorListTest2 = computed(() => actorDocs.filter(...));

watch(actorListTest2, v => console.log(v));   

onMounted(() => {
    loadActors();
});

这篇关于VUE 3合成API，传递数据并使其具有反应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！