Javascript 在nuxtjs的另一个页面中调用API

我想把我对API的调用放在一个单独的页面中，而不是放在我应用程序的模板页面中。因此，我创建了一个文件“customersAPI.js”，并将以下代码：

导出函数findAllCustomers（）{
axios.get（）http://127.0.0.1:8000/api/customers')
.然后（（回复）=>{
console.log（reponse.data['hydra:member']）
return-response.data['hydra:member']
}).catch（err=>console.log（err））
}

所以我尝试在我的模板页面中检索我的数据，并将这些数据放入数据中，但由于api调用的异步性以及我不知道如何传递数据，所以它不起作用。。。 我在我的模板页面中执行此操作：

data（）{
返回{
客户：[]，
}
},
安装的（）{
这是getAllCustomers（）；
},
getAllCustomers（）{
this.customer=findAllCustomers（）；
}

我知道这不是一个好办法，但我不知道怎么做。。。所以我需要澄清一下。而且，每次我进入文档时，在页面模板部分之外都没有API调用的示例。将api调用分开是一种好的做法吗？一般来说，调用函数使代码不太长？

---

感谢您的帮助，我建议您尝试在mounted或func中添加async

 async mounted() {
    this.customers =  await this.findAllCustomers();
  },

------
 methods: {
   async getAllCustomers(){
      this.customer = await findAllCustomers(); 
   }
 }

但从商店获取信息的更好做法是：

组成部分

<script>
import {mapActions} from 'vuex' 
export default {
    data() {
        return {
            customer: [],
        }
    },
    mounted() {
        this.customer = this.fetchAll();//better to get via getters
    },
    methods() {
        ...mapActions('customers', ['fetchAll']),
        //OR 
        // fetchAllCustomers(){
        //     this.$store.dispath('customers/fetchAll')
        // }
    }
}
</script>

原料药

请阅读有关vuex的信息

---

谢谢。我是一个初学者…所以我不理解你回答中“存储”部分的代码。。我尝试添加异步getAllCustomers（）。。。在方法部分，但它不起作用。我不明白为什么我要用状态来做这个。我只想把我的代码分开，因为它太长了

// async action that put all customers in store 
    const fetchAll =  async ({ commit }) => {
        commit(types.SET_ERROR, '')
        commit(types.TOGGLE_LOADING, true)
        try {
          const { data} = await customerAPI.findAll(namespace)
          commit(types.SET_ALLIDS, data['hydra:member'])
          commit(types.TOGGLE_LOADING, false)
          return data['hydra:member']
        } catch (error) {
          commit(types.TOGGLE_LOADING, false)
          commit(types.SET_ERROR, error)
        }
      },

// func that receive promise
export function findAll () {
   return axios.get('http://127.0.0.1:8000/api/customers')
}