Question

<script lang="ts">
import LoginAdmin from '@/components/LoginAdmin.vue'
import { Component, Vue } from 'nuxt-property-decorator'
import  Auth  from "@nuxtjs/auth";

export default class MyStore extends Vue {


public username:string="";
  public password:string="";
  public error:string="";
  async login(){
   
    try {

        await this.$auth.loginWith('local', {
          data: {
          email: this.username,
          password: this.password
          },
        })
console.log(this.$auth.loggedIn)
        // this.$router.push('/')
      } catch (e) {
      console.log(e.message)
      }
  }
}

</script>

我在Nuxt中使用打字稿作为脚本语言，但是我没有运气来调用 this。$ auth 。如何在打字稿nuxt的 class 内部调用它？

Answer 1

更新

我已经为每个为此苦苦挣扎的人找到了答案，您也可以在package.json中添加nuxt-property-decorator，然后像这样在类中添加@Component：

@Component
export default class MyStore extends Vue {

现在您可以使用$ auth

Answer 2

对于 using the Options API of Nuxt and TypeScript 的每个人，请像这样使用它：

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  middleware: ['auth'],
  methods: {
    async login(): Promise<void> {
        try {
            let res = await this.$auth.loginWith('google');
            console.log("login result: " + res);
        } catch (err) {
            console.log("login error: " + err);
        }
    }
  }
})
</script>

如何在nuxt打字稿上调用$ auth？

2 个答案: