onMounted钩子不是Vue调用的

Question

我有两个组件，一个是管理数据，另一个是vue模板。我在这里简化了它们。问题是，当位置通过fetch进入时，vue模板中的locations保持为空。我已经用isRef()进行了检查，结果为true，但它只是一个空数组。在Vue dev工具面板中，locations在数组中确实有元素。

位置.js

import {
ref,
isRef,
onMounted,
} from 'vue';

export default function useLocations () {
const locations = ref([]);
const loadImageData = (locId) => {

isRef(locations); // === true

// @FIXME locations.value is always empty here.
locations.value.forEach( (loc,key) => {
console.debug( loc.id, locId )
})
};
const getLocations = async () => {
const locs = await apiFetch({ path: '/wp/v2/tour-location'});
locations.value = locs;
};
onMounted( getLocations );
return {
locations,
getLocations,
loadImageData,
};
}

App.vue

<template>
<div class="location">
<h1>{{ location.name }}</h1>
<img :src="location.main_image" />
</div>
</template>
<script>
import useLocations from '@/composables/Locations';
export default {
name: 'Location',
props: [,'location'],
data () {return {}},
watch: {
location: {
// deep: true,
immediate: true,
handler: function(){
const { loadImageData } = useLocations();
loadImageData( location.id );
}
}
},
}
</script>

当从Location.vue组件调用loadImageData()时，locations始终是一个空数组。为什么它不在中更新的功能，就像在应用程序中的其他地方一样？

Answer 1

onMounted是一个钩子注册函数。

这些生命周期挂钩注册函数只能在setup()期间同步使用，因为它们依赖于内部全局状态来定位当前活动实例(当前正在调用其setup()的组件实例(。在没有当前活动实例的情况下调用它们将导致错误。

[emphasis mine]

文档

当您在setup()之外使用useLocations组合函数时，getLocations函数从未被调用，locations始终是空数组

进一步解释。您不需要直接在setup()内部调用onMounted(或任何其他挂钩注册函数(。将该调用放置在任何组件外部的单独组合函数中是完全可以的(就像您所做的那样(，但必须从setup()内部使用该函数