如何从 onMounted VueJS 获取数据和绑定数据

Question

Test.vue

<template>
  <li v-for="item in masterCompany" v-bind:key="item.id">
    {{ item.displayName }}
  </li>
</template>
<script>
import Test from "../hooks/Test.hook";
import { onMounted } from "vue";
export default {
  setup() {
    const { getCompanysService, masterCompany } = Test.onLoadCompanys();
    onMounted(getCompanysService);
    return {
      getCompanysService,
      masterCompany,
    };
  },
};
</script>

Test.hook.js

import MasterService from '../services/masters.service'
import {reactive} from 'vue' 
function LoadCompanys() { 
    let masterCompany = reactive([])
    const getCompanysService = async () => 
        { 
            masterCompany.value = await MasterService.getCompanys();
        }
    return  {
        masterCompany,
        getCompanysService
    }
}

export default {  
    onLoadCompanys : LoadCompanys
};

master.service.js

    import HttpRequest from './api.service' 
    let http = new HttpRequest(); 
    export const Masters = { 
        async getCompanys(){ 
            let url = 'https://Test.com/GetCompany';
            return await http.get(url).then((res) => { 
               console.log('getCompanys',res)
                return res.data;
            })
    }
} 
export default Masters

我试图从 api 获取数据，但我不知道在组件中绑定

组件没有显示价值。

或者有更好的方法吗？请指教。

Answer 1

masterCompany 应定义为ref 或传递给reactive 的对象中的嵌套字段：

import MasterService from '../services/masters.service'
import {ref} from 'vue' 
function LoadCompanys() { 
    let masterCompany = ref([])