Vuex 调度 运行 无限

Question

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

  <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)
        });
    },

Answer 1

它是一个 属性 绑定，因此 属性 绑定到 VueJS 中的值是反应性的，因此每次更改检测，它 运行 并执行它。

这就是为什么当 VueJS.

中发生变化检测时，您的方法被调用的原因

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

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

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

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