VueX가 변환이 실행되기를 기다립니다.

VueX가 변환이 실행되기를 기다립니다.

VueX에서 메서드를 만들 수 있습니까?mounted()다른 컴포넌트의 변환이 실행될 때까지 기다리시겠습니까?

변환이 실행되기 전후에 실행되기 때문에 컴포넌트가 마운트되었을 때 실행 후 대기할 수 있는지 여부를 알 수 있습니다.

  mounted() {
    // await MutationName
    this.columnItemsInit();
  }

store.subscribe 메서드로 돌연변이를 구독할 수 있습니다.

mounted() {
  let unsubscribe = null
  unsubscribe = this.$store.subscribe(({ type }) => {
    if (type === 'MutationName') {
      this.columnItemsInit()
      unsubscribe() // So it only reacts once.
    }
  })
}

컴포넌트가 어떤 식으로든 관련되어 있지 않는 한(부모에서 자녀로) 까다로울 수 있습니다.첫 번째 구성요소가 함수를 완료하면 업데이트할 수 있는 저장소의 값(예: "알파"라는 이름)을 확인하는 최종 구성요소의 계산된 속성에 워처를 추가할 수 있습니다.그렇게

컴포넌트 1

mounted() {
    // Run function then update state value "alpha" in store to say I am complete
}

컴포넌트 2

computed {
    valueInStore() {
        // return state value "alpha"
    }
},

watch: {
    valueInStore(value) {
        // If value "alpha" is complete run the following code
        this.columnItemsInit();
    }
}

이를 위한 올바른 방법은 vuex 작업을 사용하는 것입니다.동작의 특성은 비동기적이기 때문에 액션을 실행할 때 액션이 발생할 때까지 대기할 수 있습니다.

설명서에 기재된 바와 같이

동작은 돌연변이와 비슷하지만 차이점은 다음과 같습니다.

• 상태를 변환하는 대신, 동작은 돌연변이를 커밋합니다.
• 액션은 임의의 비동기 작업을 포함할 수 있습니다.

따라서 다음 작업으로 넘어가기 전에 해당 작업이 수행되기를 기다릴 수 있습니다.

예를 들어 다음과 같습니다.

const store = new Vuex.Store({
    state: {
        token: null
    },
    mutations: {
        SET_TOKEN (state, payload) {
          state.token = payload
        }
      },
      actions: {
        SET_TOKEN ({ context }, token) {
          context.commit('SET_TOKEN', token)
        }
      }
})

그 후 메서드/훅에서는 디스패치 방식을 사용하여 액션을 호출합니다.

methods: {
    async refreshStoreValue() {
        await this.$store.dispatch('SET_TOKEN', token) //this will call an action declared in your store.
    }
}

이 문은 비동기 방식 선언 내부 또는 라이프 사이클 후크 내부(작성, 마운트 등)에서 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/61482404/vuex-wait-for-mutation-to-execute