비동기 상태 변경 후 Vuex 기능 실행

비동기 상태 변경 후 Vuex 기능 실행

Vuex와 같은 제품의 일반적인 사용 사례에 대한 예를 찾는 데 어려움을 겪고 있습니다.

api를 통해 입력하기 위해 스토어에 비동기 액션을 디스패치합니다.이 스토어가 채워지면 특정 작업을 수행해야 합니다.

Vuex의 모든 예는 UI에 대한 직접적인 업데이트만 처리하는 것 같습니다.그러나 대부분의 경우 주요 컴포넌트 기반 작업도 수행해야 합니다.

state: {
  // initial state values are all falsey
  id: false,
  name: false,
},
getters:   {
  getItem: (state) => {
    return state;
  },
},
actions: {
  setItem({commit}) {
    // async call to get and then commit the state
  }
}

위는 아이템스토어의 관련 스니펫으로 액션을 디스패치하기 위한 콜이 일반적으로 여기에 상세하게 기재되어 있지 않은 컴포넌트에서 호출되는 매우 간단한 예입니다.아래는 아이템이 채워질 때까지 지켜보고 있는 컴포넌트입니다.

watch:    {
  item: function (newItem) {
    this.doSomethingWith(newItem);  // this never runs
  }
},
computed: {
  ...mapGetters({
    item: 'getItem',
  }),
},
mounted() {
  console.log(this.item);  // I get an observer of the item object

  // none of items state properties are defined during mounted
},
methods: {
 doSomethingWith(item) {
   // I want to do something here with the set item!!
 }
}

외부 API에 대한 비동기 호출이므로 마운트에서는 아이템 상태가 설정되지 않을 것으로 예상됩니다.그러나 최종적으로 데이터가 채워지면 워처가 이를 포착하여 컴포넌트 내에서 후속 작업을 수행할 수 있게 됩니다.하지만 시계는 절대 켜지지 않는다.

이러한 컴포넌트의 변경을 추적하고 새로운 상태에 따라 작업을 실행하려면 어떻게 해야 할까요?

코드가 반환된 객체를 감시하고 있기 때문에 워치는 기동하지 않습니다.getItem즉,state오브젝트 및 참조state오브젝트는 변경되지 않습니다.상태 객체의 속성만 변경됩니다.시계를 발사하려면deep구경하세요.

watch:    {
  item: {
    handler:function (newItem) {
      this.doSomethingWith(newItem);
    },
    deep:true
  }
},

사용하시는 어플리케이션에 따라서는 퍼포먼스가 저하될 수 있습니다.주의 특정 속성을 감시하는 getter를 사용할 수 있습니다.

또는 비동기 API 콜을 시작하는 액션에서 약속을 반환하고 성공 핸들러에서 필요한 작업을 수행합니다.

언급URL : https://stackoverflow.com/questions/46368578/vuex-executing-function-after-async-state-change