Vue.js Nuxt页面方法需要js方法

我正在使用nuxt js。是否有一种方法可以将代码与将在许多其他请求方法中重复使用的方法分离，并将其放在另一个文件夹/位置（可能称之为aground.js）

async asyncData({ $axios, route, params, $auth }) {
    const jsonApi = new JsonApi({ apiUrl: $axios.defaults.baseURL });
    jsonApi.headers["Authorization"] = $auth.getToken("local");
    // this code below defining models i call it in many other pages many times //
    jsonApi.define("team", {
      name: "",
      abbreviation: "",
      sport: {
        jsonApi: "hasOne",
        type: "sports"
      }
    });
    jsonApi.define("sport", {
      name: "",
      teams: {
        jsonApi: "hasMany",
        type: "teams"
      },
      tournaments: {
        jsonApi: "hasMany",
        type: "tournaments"
      }
    });
    // up to here //
    let { data, errors, meta, links } = await jsonApi.find(
      "team",
      route.params.id,
      {
        include: "sport"
      }
    );
    return { data };
  },

所以我想把我提到的代码放到另一页

更新：

我试着像David在评论中说的那样做，但当我导入它时，它就是不起作用。它说它是未定义的

这是我的吞食档案

import JsonApi from 'devour-client';

export default function ({ $axios, $auth }) {
  const jsonApi = new JsonApi({ apiUrl: $axios.defaults.baseURL });
  jsonApi.headers['Authorization'] = $auth.getToken('local');
  jsonApi.define('team', {
    name: '',
    abbreviation: '',
    sport: {
      jsonApi: 'hasOne',
      type: 'sports'
    }
  });
  jsonApi.define('sport', {
    name: '',
    teams: {
      jsonApi: 'hasMany',
      type: 'teams'
    },
    tournaments: {
      jsonApi: 'hasMany',
      type: 'tournaments'
    }
  });
  return jsonApi
}

这是我目前使用的脚本

import jsonApi from '~/api/devour';

大概是这样的：

lib/api.js

const loadStuff=async（params）=>{…}；
导出{loadStuff}；

组件/widget.vue

从'~/lib/api'导入{loadStuff}；

---

请注意，

~/lib/api

路径将根据文件名和生成环境而有所不同。例如，它可能是

@/lib/api

console.log（jsonApi）

是

未定义的吗
async asyncData({ $axios, $auth, jsonApi }) {
    let { data, errors, meta, links } = await jsonApi.findAll('teams', {
      include: 'sport'
    });
    return { data };
  },