Vuex 调度运行无穷大 [英] Vuex dispatch running infinity

问题描述

请问，谁能告诉我为什么这个函数会无限循环运行?

 
这是调用以调度 vuex 操作的直接函数.
authenticationChoice(received) {this.$store.state.gitSourceAuthenticationChoice = 收到；this.$store.dispatch("gitSourceAuthenticationURL").then((response) => {this.navigationURL = response[oauth2_redirect"];console.log(this.navigationURL)});返回 this.navigationURL;},
这是vuex文件中的action函数
 async gitSourceAuthenticationURL({ state }) {返回等待 axios.get(`${Config.ApiUrl}/auth/login/${state.gitSourceAuthenticationChoice}`).then(响应 => {返回 response.data}).catch((错误) => {//console.log(error.data)});},
解决方案
它是一个属性绑定，所以在 VueJS 中绑定到一个值的属性是响应式的，所以每次更改检测，它都会运行并执行
这就是为什么当 VueJS 中发生更改检测时，您的方法会被调用所有内容.
请使用点击事件或按钮来避免这种情况.
或者你可以在标签上绑定点击事件，但是你需要使用作为按钮，这不是很推荐.>
Please, can anybody tell me why this function is running in an infinite loop?
  <a:href="authenticationChoice(currentView['name'])" > **(Here. Keeps executing)**
                <img
                  class="w-12 inline-block align-middle"
                  :src="showAuthenticationIcon(currentView['gitType'])"         
                />
  </a>
This is the direct function being call to dispatch the vuex action.
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;
    },
This is the action function in the vuex file
  async gitSourceAuthenticationURL({ state }) {
      return await axios
        .get(`${Config.ApiUrl}/auth/login/${state.gitSourceAuthenticationChoice}`)
        .then(response => {
          return response.data
        }).catch((error) => {
          //console.log(error.data)
        });
    },


解决方案
It is a property binding, so property bound to a value in VueJS is reactive, so every change detection, it ran and execute that.

That is why your method is getting called everything, when change detection is happening in VueJS.
<a:href="authenticationChoice(currentView['name'])" >
Kindly use click event or button to avoid this.
<button @click="authenticationChoice(currentView['name'])" >Text</button>
Or you can bind the click event on <a> tag, but you need to use <a> as button,  that's not very recommendable.

                        
这篇关于Vuex 调度运行无穷大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！