Javascript 如何在vuejs中编写具有MVC风格的api调用

我有一个

addTracks.vue

-组件，它按歌曲名称搜索歌曲，并从iTunesAPI返回结果。我在

addTracks.vue

组件中编写了API调用，但我想在

ApiPlaylist.js

组件中编写API调用，以创建MVC样式并在

addTracks.vue

addTracks.vue

包含方法中的API调用（注意：所有操作都与该代码一起工作）：

在

addTracks.vue

-组件中调用API，但该组件不工作：

search(term) {
  this.results = [];
  this.earching = true;
  apiPlaylist.search(term).then(tracks => {
    this.searching = false;
    this.results = tracks.results;
    this.noResults = this.results.length === 0;
  });
}

下面是我得到的错误：

核心js/modules/es6.regexp.search in ./node_modules/cache loader/dist/cjs.js？？ref--12-0/节点\模块/babel加载程序/lib/node_modules/cache loader/dist/cjs.js？？ref--0-0/节点\模块/vue加载程序/lib？？vue加载程序选项/src/components/addTracks.vue？vue&type=script&lang=js&

---

这样做：

// in ./src/api/ApiPlaylist.js
export default {
  search(term) {
    return fetch(...).then(...);
  },
};

然后在组件中导入辅助对象：

// in ./src/components/AddTracks.vue
import ApiPlaylist from '../api/ApiPlaylist';

export default {
  data() {
    return {
      results: [],
    };
  },
  methods: {
    search(term) {
      ApiPlaylist.search(term).then((data) => {
        this.results = data.results;
      });
    },
  },
};

---

错误信息是什么？您是否能够将

ApiPlaylist

导入到您的组件中？是的，我对导入该功能没有问题。错误：*core js/modules/es6.regexp.search in./node_modules/cache loader/dist/cjs.js？？ref--12-0/节点\模块/babel加载程序/lib/node_modules/cache loader/dist/cjs.js？？ref--0-0/节点\模块/vue加载程序/lib？？vue加载程序选项/src/components/addTracks.vue？vue&type=script&lang=js&，要安装它，可以运行：npm install--save core js/modules/es6.regexp.search这很奇怪，因为我的项目中还有其他组件，当我从api导入函数时，从来没有遇到过这样的错误。你的问题中的import语句被注释掉有什么原因吗？我在进行api调用时（当我测试我搜索的答案时）取消了它的注释，这不是一个打字错误，我意识到我在帖子中写的是ApiPlaylist而不是ApiPlaylist

// in ./src/api/ApiPlaylist.js
export default {
  search(term) {
    return fetch(...).then(...);
  },
};

// in ./src/components/AddTracks.vue
import ApiPlaylist from '../api/ApiPlaylist';

export default {
  data() {
    return {
      results: [],
    };
  },
  methods: {
    search(term) {
      ApiPlaylist.search(term).then((data) => {
        this.results = data.results;
      });
    },
  },
};