我们如何在不创建 html 文件中创建按钮的情况下调用 vuejs 的 javascript 文件中定义的 vuejs

Question

我对 vuejs 很陌生，正在构建一个 vuejs 项目。我遇到的任务之一是，我想从 vuejs 的 html 部分调用一个用 vuejs 的 javascript 部分编写的函数，而不创建任何按钮或文本框。我想在我的应用程序启动后立即调用此函数。我如何实现这一点？当我使用挂载(vue 生命周期钩子(时，它重定向到的页面会不断刷新。将不胜感激这方面的一些线索。

例如，我有一个代码：

<template>
<h1>Hello World!</h1>
<!--I WANT TO CALL THE auth0login function here. How do I do that without creating a button/text field,etc -->
</template>
<script>
export default {
data: () => ({
return : {
clientID: process.env.example
}
}),
methods:{
auth0login(){
console.log('logging in via Auth0!');
Store.dispatch('login');
}
}
}
</script>

我想调用在上面的html部分中脚本部分中定义的auth0login函数，以执行auth0login函数的功能。我想在不创建任何按钮的情况下执行此操作，只需在应用程序启动时执行 auth0login 函数。 我该怎么做？

Answer 1

我猜只有当你还没有记录时，你才需要调用auth0login((。

Answer 2

我认为原因是在用户已经登录后，他们回到初始页面，并且mounted((钩子中的函数再次运行。这就是为什么他们不断重定向到登录页面的原因。插入按钮时不会发生这种情况，因为按钮需要用户单击它。

要解决此问题，您需要定义一个vuex state来存储用户是否已登录，并且在mounted((钩子中，只是在他们尚未登录时调用它。

所以。而不是

mounted: function() { console.log('logging in via Auth0!'); this.auth0login() } }

添加检查登录状态

mounted() {
if(!this.$store.state.userLoggin) // here i define userLoggin and vuex state, you should update it to true whenever user successfully login
{ console.log('logging in via Auth0!'); this.auth0login() //only call it when user not loggin
}
}

并记得在用户成功登录auth0login()功能时更新您的vuex state.userLoggin