Nuxt 页面方法需要 js 方法

Posted 2023-02-22

【中文标题】Nuxt 页面方法需要 js 方法

【英文标题】：require a js method for Nuxt page methods

【发布时间】：2020-01-26 02:53:36

【问题描述】：

我正在使用 nuxt js。有没有办法将代码与将在许多其他请求方法中重新使用的方法分离，并将其放置在另一个文件夹/位置，可能称为 devour.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 ;
  ,

所以我正在考虑将我提到的代码放在另一个页面中。

更新：

我尝试像大卫在 cmets 中所说的那样这样做，但是当我导入它时它就不起作用了。它说它是未定义的。

这是我的吞噬文件

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';

async asyncData( $axios, $auth, jsonApi ) 
    let  data, errors, meta, links  = await jsonApi.findAll('teams', 
      include: 'sport'
    );
    return  data ;
  ,

【问题讨论】：

console.log(jsonApi) 是 undefined?

是的，它的未定义 :(

Where to store common component methods in #NUXT.JS的可能重复

【参考方案1】：

类似这样的：

lib/api.js

const loadStuff = async (params) => ...;
export  loadStuff ;

components/widget.vue

import  loadStuff  from '~/lib/api';

请注意，~/lib/api 路径会因文件名和构建环境而异。例如。可能是@/lib/api。