我们如何在 vuejs 的 javascript 文件中定义的 vuejs 的 html 文件中调用函数而不在 html 文件中创建按钮？

Posted 2023-02-22

【中文标题】我们如何在 vuejs 的 javascript 文件中定义的 vuejs 的 html 文件中调用函数而不在 html 文件中创建按钮？

【英文标题】：How do we call a function within the html file of vuejs defined in the javascript file of vuejs without creating a button in the html file?

【发布时间】：2020-09-07 11:04:45

【问题描述】：

我对 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函数的功能。我想这样做而不在 html 文件中创建任何按钮，只需在应用程序启动时执行 auth0login 函数。 我该怎么做？

【问题讨论】：

mounted() 钩子是完全合适的，但是你想调用的函数到底是什么。您能否提供一个您已经尝试过的基本示例？

mounted: function() console.log('logging in via Auth0!'); this.auth0login() 我调用的函数是 auth0login 函数。此函数进一步调用另一个函数，该函数用于使用 auth0 验证登录详细信息。基本上，它将用户重定向到 auth0 登录页面，获取用户的凭据，对其进行身份验证，然后如果用户名和密码正确，则将其重定向到仪表板。登录成功后出现此问题。仪表板每次都保持刷新。

当我在 html 文件中添加一个按钮然后调用 auth0login 函数时，auth0 身份验证代码工作正常。但是当我删除该部分并尝试使用mounted调用auth0login函数时，它会在成功登录后不断刷新重定向页面。

【参考方案1】：

我认为原因是用户已经登录后，他们回到初始页面，并且 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

【讨论】：

谢谢。您建议的逻辑适用于上述测试用例。但是，如果我保留该 if 语句并且我在不注销的情况下关闭网站，然后再次打开网站，那么它不会将我引导到仪表板（而是我得到一个空白页面）。发生这种情况是因为 userLoggin 是 True，因为我们之前登录过（访问令牌仍然是有效的），因此，它不会调用 auth0login()，它具有加载页面的所有功能（如果已经授权或未授权） .

我可以通过添加一个 else 语句来重定向到已经登录的仪表板页面来解决这个问题，但是它会继续加载该页面，因为已安装周期。完成特定操作后，有没有办法打破挂载循环？

这个奇怪的原因通常是在关闭浏览器时清除 vuex，你是否将 vuex 状态 userLogin 存储在 localStorage 中？

是的，会话存储在 localStorage 中。一旦 auth0login() 被调用，有没有办法打破挂载的钩子生命周期？这样一来，我们就可以在 auth0login() 仅调用一次时简单地打破已挂载的生命周期，而不是保持“是否”检查用户是否已登录。

【参考方案2】：

我猜只有在您尚未登录时才需要调用 auth0login()。

【讨论】：

auth0login() 会执行所有内部检查用户是否登录。有没有办法在不创建按钮/文本字段等的情况下从 html 文件调用函数？

不。很抱歉坚持，但即使用户已登录，您的“内部检查”也必须包含一些重定向，这是唯一的解释。

谢谢。检查是否登录有帮助。