在 Vue 模板中调用服务方法答案

【问题标题】：Calling service method in a Vue template在 Vue 模板中调用服务方法
【发布时间】：2020-11-16 16:29:20
【问题描述】：

我有

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

<script>
import ApiService from '../service/api.service';
export default {
  setup() {
      function doSomething() {
        ApiService.doSomething();
      }
      return {
        doSomething
      }
  }
}
</script>

如果我让它更短（就像我在 Angular 中使用的那样）：

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

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

它不起作用，引发运行时错误。（即使我尝试作为函数调用它也不起作用： @click="ApiService.doSomething()"

您能帮忙吗，如何节省时间/代码并直接在模板中调用 ApiService.doSomething？

附：他们还让我发布 ApiService 所以这里是： api.service.js：

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

const ApiService = {

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

    //...

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

}

export default ApiService

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

它不起作用，因为您需要通过setup 函数将其传递到模板中。

你可以这样做：

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

<script>
import ApiService from '../service/api.service';
export default {
  setup() {
      return { ApiService }
  }
}
</script>

或者，您也可以为脚本使用setup 属性，它可以为您带来一些提升的魔力。 (rfc link)

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

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

【讨论】：

但是对于第二种解决方案，我得到编译器错误“'ApiService' is defined but never used”
我的错，我错过了导出
有效，但我必须将 ApiService 放在括号中：export {ApiService} 否则它会抛出错误：Unexpected token, expected "{"
最后一个解决方案抛出错误：此实验性语法需要启用解析器插件：'exportDefaultFrom'
如果我将 ApiService 包装在括号中，您的第二个解决方案的先前版本很好。

【解决方案2】：

您可以在方法选项methods:{...ApiService } 中传播该服务功能：

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

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

api.service.js

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

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

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

export default ApiService;

LIVE DEMO

【讨论】：

正如丹尼尔在他的第一个解决方案中证明的那样，这是可能的。
好的，我的建议呢？
我不想使用 20 种方法一个一个地导入...（import { doSomething, doSomething2, doSomething3 } ）...我需要 ApiService 方法，这就是为什么它是一个服务。
它也适用于您的对象语法import ApiService from '../service/api.service'; 和methods:{...ApiService} 请检查此demo
谢谢你，它有效，所以我会在上面给你的评论另一个赞成票。但是，由于以下几个原因，您的答案没有得到支持：我想要带有 setup() 的 Vue3 解决方案。其次，由于与同名冲突，我不能以这种方式在本地使用方法“doSomething”，我特别想像我在问题中提到的那样调用“ApiService.doSomething”。第三，Daniel 的解决方案更简单，更符合我对 Vue3 的期望。无论如何，谢谢。

【解决方案3】：

您可以尝试在函数调用中添加括号吗？

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

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

【讨论】：

不，它不起作用。不过，我会修改问题