时间戳

首页 > 解决方案 > Vuex调度无限运行

vuex - Vuex调度无限运行

问题描述

拜托，谁能告诉我为什么这个函数在无限循环中运行？

  <a:href="authenticationChoice(currentView['name'])" > **(Here. Keeps executing)**
                <img
                  class="w-12 inline-block align-middle"
                  :src="showAuthenticationIcon(currentView['gitType'])"         
                />
  </a>

这是被调用以调度 vuex 操作的直接函数。

authenticationChoice(recieved) {
      this.$store.state.gitSourceAuthenticationChoice = recieved;

      this.$store.dispatch("gitSourceAuthenticationURL").then((response) => {
        this.navigationURL = response["oauth2_redirect"];
        console.log(this.navigationURL)
       
      });
      return this.navigationURL;
    },

这是vuex文件中的action函数

  async gitSourceAuthenticationURL({ state }) {
      return await axios
        .get(`${Config.ApiUrl}/auth/login/${state.gitSourceAuthenticationChoice}`)
        .then(response => {
          return response.data
        }).catch((error) => {
          //console.log(error.data)
        });
    },

标签： vuexhrefvuejs3

解决方案

它是一个属性绑定，所以绑定到一个值的属性VueJS是反应性的，所以每次更改检测，它都会运行并执行它。

这就是为什么当更改检测发生在VueJS.

<a:href="authenticationChoice(currentView['name'])" >

请使用点击事件或按钮来避免这种情况。

<button @click="authenticationChoice(currentView['name'])" >Text</button>

或者你可以在标签上绑定点击事件<a>，但你需要<a>作为按钮使用，这不是很推荐。

推荐阅读