Javascript 在Vue模板中调用服务方法

我有

---

你能给函数调用加上括号吗

import axios from 'axios';
import router from '@/router';

const ApiService = {

    init(baseURL) {
        axios.defaults.baseURL = baseURL;
    },

    //...

    doSomething() {
        router.push({ path: '/goSomewhere' });
    },

}

export default ApiService

...
从“../service/api.service”导入ApiService；

它不起作用，因为您需要将它通过

设置

功能才能在模板中使用

但您可以这样做：

...
从“../service/api.service”导入ApiService；
导出默认值{
设置（）{
返回{ApiService}
}
}

或者，您也可以为脚本使用

设置

属性，这会为您带来一些神奇的效果。（）

...
从“../service/api.service”导入ApiService；
出口服务；

您可以在方法选项

methods:{…ApiService}

中传播该服务功能：

<template>
  <button @click="ApiService.doSomething()">...</button>
</template>

<script>
import ApiService from '../service/api.service';
</script>

---

不，它不起作用。但是，我将修改问题，但对于第二个解决方案，我得到编译器错误“'ApiService'已定义但从未使用过”我的错误，我错过了exportWorks，但我必须将ApiService放在括号中：export{ApiService}否则它抛出错误：意外标记，预期为“{”最后一个解决方案抛出了一个错误：这个实验性语法需要启用解析器插件：“exportDefaultFrom”。如果我将ApiService括在括号中，那么第二个解决方案的上一个版本就可以了。正如Daniel在他的第一个解决方案中所证明的，这是可能的。好吧，我的建议呢？我不想使用像20个方法那样逐个导入。。。（导入{doSomething，doSomething2，doSomething3}）…我需要ApiService方法，这就是为什么它是一个服务。它对您的对象语法也是有效的。

import-ApiService from'../service/api.service'；

和

方法：{…ApiService}

请检查此项，谢谢，它可以工作，因此我将在上面再次向上投票。但是，您的答案没有得到向上投票，原因有几个：我希望Vue3解决方案带有setup（）。其次，我不能以这种方式在本地使用方法“doSomething”，因为与相同的名称冲突，我特别想打个电话正如我在问题中提到的“ApiService.doSomething”。第三，Daniel的解决方案更简单，符合我对Vue3的期望。无论如何，谢谢。

import axios from 'axios';
import router from '@/router';

const ApiService = {

    init(baseURL) {
        axios.defaults.baseURL = baseURL;
    },

    //...

    doSomething() {
        router.push({ path: '/goSomewhere' });
    },

}

export default ApiService

<template>
  <button @click="ApiService.doSomething()">...</button>
</template>

<script>
import ApiService from '../service/api.service';
</script>

<template>
  <button @click="doSomething">...</button>
</template>

<script>
import  ApiService from '../service/api.service';
export default {
methods:{
  ...ApiService
}
}
</script>

const ApiService = {
  doSomething() {
    console.log("doing something");
  },

  doSomething2() {
    console.log("doing something 2");
  },

  doSomething3() {
    console.log("doing something 3");
  }
};

export default ApiService;