비동기 작업이 완료되기 전의 Vuex 액세스 상태

비동기 작업이 완료되기 전의 Vuex 액세스 상태

계산된 getter가 업데이트되기 전에 상태에 액세스하여 이전 상태를 렌더링하는 문제가 있습니다.이미 돌연변이를 액션과 병합하거나 상태를 여러 가지 값으로 변경하는 등 몇 가지 시도를 했지만 디스패치가 종료되기 전에 getter가 호출되고 있습니다.

문제

상태는 비동기 액션(api 콜)이 완료되기 전에 액세스 됩니다.

코드 구조

1. 컴포넌트 A는 API 데이터를 로드합니다.
2. 사용자가 1개의 데이터를 클릭합니다.
3. 컴포넌트 A는 클릭 데이터(개체)를 컴포넌트 B로 디스패치합니다.
4. 컴포넌트 B는 수신된 객체를 로드합니다.

메모

DOM은 정상적으로 동작.이것은 콘솔 오류입니다.Vue는 항상 DOM의 변경과 재렌더를 즉시 감시합니다.그러나 콘솔은 모든 것을 선택합니다.

목표

컴포넌트 A의 디스패치가 완료되기 전에 컴포넌트 B(AFTER 컴포넌트만)가 계산된 getter 메서드를 실행하지 않도록 합니다.

Store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';

Vue.use(Vuex);

export const store = new Vuex.Store({

  state: {
    searchResult: {},
    selected: null,
  },

  getters: {
    searchResult: state => {
      return state.searchResult;
    },
    selected: state => {
      return state.selected;
    },
  },

  mutations:{
    search: (state, payload) => {
      state.searchResult = payload;
    },
    selected: (state, payload) => {
      state.selected = payload;
    },
  },

  actions: {
    search: ({commit}) => {
      axios.get('http://api.tvmaze.com/search/shows?q=batman')
        .then(response => {
          commit('search', response.data);
        }, error => {
          console.log(error);
        });
    },

    selected: ({commit}, payload) => {
      commit('selected', payload);
    },
  },

});

검색 결과표시하다

<template>
<div>
  //looped
  <router-link to="ShowDetails" @click.native="selected(Object)"> 
      <p>{{Object}}</p>
  </router-link>
</div>
</template>

<script>
export default {
  methods: {
    selected(show){
      this.$store.dispatch('selected', show);
    },
  },
}
</script>

상세보기표시하다

<template>
<div>
  <p>{{Object.name}}</p>
  <p>{{Object.genres}}</p>
</div>
</template>

<script>
export default {
  computed:{
    show(){
      return this.$store.getters.selected;
    },
  },
}
</script>

이 이미지는 파일 'ShowDetails'의 계산된 메서드 'show'가 상태가 갱신되기 전에 실행되는 것을 나타냅니다('show' 계산 메서드 이전에 실행됩니다).그런 다음 업데이트가 완료되면 두 번째 콘솔 "TEST"를 볼 수 있습니다. 이 콘솔은 첫 번째 콘솔 "TEST" 이후 몇 밀리초 후에 실제로 개체로 채워집니다.

질문.

Vuex는 모두 상태 감시와 관리에 관한 것입니다.이 콘솔 오류를 방지하려면 어떻게 해야 합니까?

잘 부탁드립니다.

store.dispatch는 트리거된 액션핸들러에 의해 반환된 Promise를 처리할 수 있으며 Promise도 반환됩니다.구성 작업을 참조하십시오.

다음과 같은 약속을 반환하도록 선택한 작업을 설정할 수 있습니다.

selected: ({commit}, payload) => {
    return new Promise((resolve, reject) => {
        commit('selected', payload);
    });
} 

다음으로 SearchResults에 입력합니다.를 사용하는 대신router-link버튼을 사용하여 선택한 액션의 약속 콜백 성공 시 다음과 같이 프로그램 내비게이션을 수행합니다.

<template>
<div>
  //looped
  <button @click.native="selected(Object)"> 
      <p>{{Object}}</p>
  </button>
</div>
</template>

<script>
export default {
  methods: {
    selected(show){
      this.$store.dispatch('selected', show)
          .then(() => {
            this.$router.push('ShowDetails');
        });
    },
  },
}
</script> 

검색 결과가 없는 경우 v-if를 사용하여 템플릿을 렌더링하지 않도록 할 수 있습니다.

v-if="$store.getters.searchResult"

상태를 초기화합니다.다른 모든 Vue 데이터와 마찬가지로 빈 데이터라도 항상 시작 지점에서 초기화하는 것이 좋습니다.''또는[]그러나 VueJs(Angular 또는 React 중 어느 쪽이 동일한지 확실하지 않지만 유사한 것으로 생각됨)는 모든 변수를 초기화하면 훨씬 더 잘 작동합니다.

스토어 인스턴스에서 상태의 초기 빈 값을 정의할 수 있습니다.

대부분의 플러그인은 초기화된 데이터에서는 정상적으로 동작하지만 초기화되지 않은 데이터에서는 정상적으로 동작하지 않기 때문에 여기서뿐만 아니라 폼 검증에서도 도움이 됩니다.

도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/44645086/vuex-accessing-state-before-async-action-is-complete