vuex: 비동기 함수에서 기본값 설정

vuex: 비동기 함수에서 기본값 설정

다음과 같은 매장이 있습니다.

export const store = new Vuex.Store({
    state: {
        someProp: someAsyncFn().then(res => res),
        ...
    },
    ...
})

왠지...someProp값이 해결되기를 기다리는 것이 아닙니다.이게 나쁜 관행인가요?빈 개체를 기본값으로 설정하고 로드 시 변환을 통해 상태를 업데이트해야 합니까?

다음과 같이 해야 합니다.

export const store = new Vuex.Store({
    state: {
        someProp: null
        ...
    },
    mutations:{
        initializeSomeProp: (state, payload) => {
            state.someProp = payload;
        }
    },
    actions:{
        asyncSomeProp: ({commit}) => {
            someAsyncFn().then(res => commit('initializeSomeProp', res))
        } 
    }
}) 

비동기 기능은 액션에 의해 처리되어야 합니다.이 액션을 사용할 수 있습니다.asyncSomeProp돌연변이를 저지르고initializeSomeOrop을 통과함으로써respayload 파라미터로서 비동기 콜백으로 취득합니다.

그 후 를 초기화하려면someProp일부 컴포넌트에서는, 그 후, 그 컴포넌트의asyncSomeProp다음과 같이 해당 컴포넌트의 생성된 라이프 사이클 후크에서 액션을 수행합니다.

created(){
    this.$store.dispatch('asyncSomeProp');
}

언급URL : https://stackoverflow.com/questions/44304155/vuex-set-default-values-from-async-function