将 team-js 导入 Vue.js 文件答案

【问题标题】：Import teams-js into Vue.js file将 team-js 导入 Vue.js 文件
【发布时间】：2020-03-23 04:46:39
【问题描述】：

我目前正在尝试将 Microsoft Teams SDK 实施到我的 Vue.js 项目中。我已经安装了 npm 包并在我的 vue 文件中引用了该包，但由于某种原因，我的 microsoftTeams 别名的值将显示为未定义。有没有我遗漏的步骤或为什么会这样？

我的 vue 文件片段：

<template>
  <div>
    <button v-on:click="getAuth()">do</button>
  </div>
</template>

<script>
import * as microsoftTeams from "@microsoft/teams-js";

export default {
  methods: {
    getAuth() {
      console.log(microsoftTeams);
    }
  }
};
</script>

【问题讨论】：

您是否初始化了 MicrosoftTeams js？您需要先初始化团队 js。
我知道你必须先初始化包，然后才能使用它。问题是我根本无法访问包，因为我错过了 data() 中的引用，如下面的解决方案中所述。

标签： javascript vue.js npm microsoft-teams

【解决方案1】：

设置任何变量仍然必须在数据对象中声明，除非您将其附加到窗口对象。

<template>
  <div>
    <button v-on:click="getAuth()">do</button>
  </div>
</template>

<script>
import * as microsoftTeams from "@microsoft/teams-js";

export default {
  data() {
    return {
      microsoftTeams,
    };
  },
  methods: {
    getAuth() {
      console.log(this.microsoftTeams);
    }
  }
};
</script>

【讨论】：

修复了这个问题。太感谢了！ :)