如何使用Nuxt上下文使用param调用Axios请求

如何解决如何使用Nuxt上下文使用param调用Axios请求

所以我正试图让我的Axios用一个以URL结尾的参数进行获取请求

'/?user= {id}'

该ID由我从Vuex的loggingInUser.id传入。我知道异步函数不会在调用中接受“ this”，因此我将store作为参数包括在内。我如何传递数据以解决我的想法还差得远。感谢您的帮助，谢谢！

  

    import { mapGetters } from "vuex";
       
       export default {
         computed: {
           ...mapGetters(["loggedInUser"])
         },head() {
           return {
             title: "Actors list"
           };
         },components: {
           EditProfile
         },async asyncData({ store }) {
           try {
             const body = { data: store.getters.loggedInUser.id };
             const { actors } = await $axios.$get(`/api/v1/actors/`,{
               params: {
                 user: body
               }
             });
       
             return { actors };
           } catch (e) {
             return { actors: [] };
           }
         },data() {
           return {
             actors: []
           };

修改

当我从“常量主体”中删除数据并删除“演员”周围的括号时，它就可以正常工作

    try {
      const body = store.getters.loggedInUser.id;
      const actors = await $axios.$get(`/api/v1/actors/`,{
        params: {
          user: body
        }
      });

解决方法

在Nuxt中，使用asyncData挂钩可以从路由上下文键获取查询参数。

请阅读Nuxt.js上下文文档。 The context provides additional objects/params from Nuxt to Vue components

使用您的域/？user = wonderman

asyncData({ route: { query: queryParams} }) {},

variable queryParams是一个对象：

{ user: "wonderman" }

,

您可以从 Context 访问您的 params。

Context 可用于特殊的 nuxt 生命周期区域，例如 asyncData、fetch、plugins、middleware 和 nuxtServerInit。