계산된 루프 생성에서 getter 반환

계산된 루프 생성에서 getter 반환

스토어에서 계산된 액션을 호출하여 실행하고 있으며, getter를 반환하면 루프가 생성됩니다.

HTML

{{loadedProjects}}

계산한

computed: {
    loadedProjects() {
      this.$store.dispatch("getProjects");
      return this.$store.getters.loadedProjects;
    }
  }

가게

import Vuex from "vuex";
import axios from "axios";

const createStore = () => {
    return new Vuex.Store({
        state: {

            loadedProjects: []
        },
        mutations: {
            setProjects(state, projects) {
                state.loadedProjects = projects
            }

        },
        actions: {
            getProjects(vuexContext) {
                console.log("hello1")
                return axios.get("THE API URL")
                    .then(res => {
                        console.log("hello2")
                        vuexContext.commit("setProjects", res.data);
                    })
                    .catch(e => console.log(e));
            }

        },
        getters: {
              loadedProjects(state) {
                return state.loadedProjects;
              }
        }
    });
};

export default createStore;

작업을 호출하여 상태를 채운 후 상태를 반환하여 데이터를 렌더링해야 합니다.

계산된 속성 내에서 API 호출을 하는 스토어 액션을 사용하는 이유는 무엇입니까? 트리거하고 싶을 수 있습니다.loadedProjectschange ?...syslog 속성은 비동기적이지 않으므로 어느 쪽이든 응답을 받기 전에 리턴 라인이 실행됩니다.vue-async-calculated 플러그인을 시도하거나 콜을 사용할 수 있습니다.created어떤 것이 더 나은 방법인지, 그리고 당신이 할 수 있는 계산된 속성을 사용할 필요가 없습니다.{{ $store.getters.loadedProjects }}템플릿으로

계산된 속성은 부작용이 없어야 한다(예: 저장 조치 호출, 데이터 변경 등).그렇지 않으면 트리거된 부작용이 구성 요소의 재렌더링 및 계산된 성질의 재페치 가능성으로 이어질 수 있습니다.즉, 무한 루프(infinite loop)

코드를 이렇게 바꿨어요.

created: function () {
  this.$store.dispatch("getProjects")
},
computed: {
  loadedProjects() {
    return this.$store.getters.loadedProjects
  }
}

지금은 동작하고 있습니다만, 알고 싶습니다만, 계산기 내부에서 동작하고 있는 것도 문제가 있고, 그것이 최선의 해결책인지도 의문입니다.도움이 필요하신가요???

언급URL : https://stackoverflow.com/questions/57613089/returning-a-getters-in-a-computed-create-a-loop