Vue环境下全局产品状态在子组件返回空值的问题排查

在Vue开发环境中，我们声明了全局产品状态，用于产品列表、分类下拉导航栏等组件，相关代码如下：

import axios from "axios";
axios.defaults.baseURL = 'http://localhost:3000/';
export function sharedstore() {
const state = reactive({
    products:[],
        .............
});
  async function fetchproductsdata() {
    try {
        state.products = (await axios.get('Products')).data;
    }
    catch (error) {
        console.error("Product Data Fetching Error, ", error)
    }
}
return {
    state,
fetchproductsdata
}

根组件调用接口获取产品数据一切正常，但产品子组件调用该全局状态时始终返回空值，子组件代码如下：

let products = computed(()=>shared.state.products);
onMounted(()=>{
console.log(toRaw(products.value))
})

• 全局状态未实现单例，子组件拿到独立实例
  当前sharedstore是工厂函数，每次调用都会创建全新的reactive状态对象。如果根组件调用sharedstore()生成实例并发起数据请求，子组件却单独调用sharedstore()拿到另一个未请求数据的新实例，自然会返回空数组。

• 子组件对全局状态的引用错误
  子组件中的shared如果不是根组件已经初始化好的那个实例，而是重新调用sharedstore()生成的新对象，就会导致状态不共享。比如子组件直接导入sharedstore后执行const shared = sharedstore()，而非复用根组件的全局实例，就会出现数据不同步。

• 子组件生命周期钩子执行时机早于请求完成
  即使是同一个全局实例，若根组件的fetchproductsdata异步请求还未完成，子组件的onMounted就已经触发，此时products.value还未被赋值，打印结果为空。但这种情况后续数据更新时，computed值会自动响应变化，仅初始打印为空。

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