vuex에서 vue 라이프사이클 후크에서 비동기/대기 기능을 사용하는 방법

vuex에서 vue 라이프사이클 후크에서 비동기/대기 기능을 사용하는 방법

mounted() 라이프 사이클 훅의 App.vue 컴포넌트에서 액션을 디스패치하면 다른 컴포넌트가 로드된 후에 실행됩니다.액션과 마운트된 라이프 사이클 훅에 비동기/대기 기능을 사용하고 있습니다.

App.vue 파일

methods: {
   ...mapActions({
      setUsers: "setUsers",
   }),
},
async mounted() {
        try {
            await this.setUsers();
        } catch (error) {
            if (error) {
                console.log(error);
            }
        }
    },

action.filename 파일:

async setUsers(context) {
        try {
            const response = await axios.get('/get-users');
 
            console.log('setting users');
 
            if (response.data.success) {
                context.commit('setUsers', {
                    data: response.data.data,
                });
            }
        } catch (error) {
            if (error) {
                throw error;
            }
        }
    },

Users 목록 구성 요소에서 vuex에서 사용자를 가져와야 합니다.그래서 mapGetters를 사용하여 사용자 목록을 가져옵니다.

...mapGetters({
            getUsers: "getUsers",
        }),
    mounted() {
            console.log(this.getUsers);
    },

단, 문제는 콘솔로그인 후 실행 중인 "사용자 설정" 콘솔로그인에 있습니다.this.getUsers.

Users 목록 컴포넌트에서는 템플릿에서 getUsers를 사용할 수 있지만 콘솔로그를 하려고 하면 아무것도 표시되지 않습니다.

어떻게 뛰어요?app.vue다른 컴포넌트를 실행하기 전에 파일을 작성하시겠습니까?

컴포넌트에서 비동기 wait를 올바르게 사용하고 있습니다.을 이해하는 것이 중요합니다.async await컴포넌트의 실행은 지연되지 않으며 컴포넌트는 다음과 같은 다양한 라이프 사이클 훅을 렌더링하여 통과합니다.mounted.

뭐?async awaitdoes는 현재 컨텍스트의 실행을 연기하는 것입니다.함수 내에서 사용하는 경우, 다음 코드입니다.await약속이 해결된 후에 발생하며, 당신의 경우, 당신은 그것을 사용하고 있습니다.created라이프 사이클 훅. 즉, 내부 코드가mounted기능인 라이프 사이클 훅은 대기 후에 해결됩니다.

따라서 데이터가 수신되었을 때만 컴포넌트를 렌더링해야 합니다.

방법은 다음과 같습니다.

1. 구성 요소가 상위 구성 요소의 하위 구성 요소인 경우v-if데이터가 도달하면 다음과 같이 데이터를 true로 설정합니다.

data() {
  return {
   hasData: false,
  }
}

async mounted() {
 const users = await fetchUsers()
 this.hasData = true;
}

<SomeComponent v-if="hasData" />

2. 컴포넌트가 상위 컴포넌트의 하위 컴포넌트가 아닌 경우watcher컴포넌트가 렌더링되면 알려드립니다.사용시watch변화가 생길 때마다 일어나는 일이기 때문에 조심해야 한다.

간단한 경험 규칙은 자주 변경되지 않는 변수와 함께 워치를 사용하는 것입니다. 데이터를 대부분 읽기 전용으로 사용할 수 있는 경우 데이터를 사용할 수 있습니다. 그렇지 않은 경우 다음과 같은 속성을 Vuex에 추가할 수 있습니다.loadingUsers.

다음은 그 방법의 예입니다.

  data: {
    return {
     hasData: false,
    }
  },
  
  computed: {
   isLoading() {
    return this.$store.state.app.users;
   }
  },
  
  watch: {
    isLoading(isLoading) {
      if (!isLoading) {
        this.hasData = true;
      }
    }
  }

<SomeComponent v-if="hasData" />

질문:.달리기를 기대하십니까?await this.setUsers();앱이 로드될 때마다(어느 페이지/컴포넌트가 표시되는지에 관계없이)

만약 그렇다면, 당신의App.vue괜찮아요.또한 '사용자 목록 구성 요소'에서도 사용할 수 있습니다.mapGetters값을 얻습니다(계산된 값이어야 합니다).문제는 '기다려야 한다'는 것입니다.setUsers해야 할 입니다.getUsers을 사용하다

이 문제를 쉽게 해결할 수 있는 방법은 조건부 렌더링을 사용하는 것이며 컴포넌트를 렌더링하는 것은getUsers정의되어 있습니다.은 가가 a a a a a a a a a a를 추가할 .v-if component되며 Users list component'가 Users list component'로 전송될 됩니다.v-if="getUsers"(가 이미에) 합니다.그러면 데이터가 이미 존재하기 때문에 마운트된 로직도 정상적으로 작동합니다.

API에서 데이터를 가져오는 경우 DOM이 아직 렌더링되지 않았지만 마운트된 대신 "this"를 사용할 수 있는 안에 작업을 디스패치하는 것이 좋습니다.다음은 Vuex 모듈을 사용하는 경우의 예입니다.

created() {
  this.fetchUsers();
},
methods: {
  async fetchUsers() {
    await this.$store.dispatch('user/setUsers');
  },
},
computed: {
  usersGetters() {
    // getters here
  },
},

언급URL : https://stackoverflow.com/questions/65639724/how-to-use-async-await-in-vue-lifecycle-hooks-with-vuex