Vuex, 작업 상태 변경

Vuex, 작업 상태 변경

Vuex를 배우면서 가능한 한 "좋은 관행"을 코드화하려고 합니다.

제가 배운 바로는 액션은 외부 API 호출 등에 사용되며 그 결과는 commit()를 통해 Mutation으로 전달됩니다.

이제 Firebase의 특정 사용자에 대한 카운터를 증가시킵니다.이렇게 내 동작을 코드화하면 작동한다.

    ADD_CREDIT(context, user) {

        user.credits++;

        firebase.database().ref('users').child(user.id)
            .update({credits: user.credits})
            .then(() => {});

    }

그래서 API 콜을 호출하기 전에 이미 상태를 업데이트하고 있습니다.이게 좋은 방법인가요?다음 코드를 사용하여 다른 방법으로 시도했지만, 그게 좀 복잡해 보입니다.그리고 지금으로선 효과가 없어요.

액션.

ADD_CREDIT({commit, state}, user) {

        const newcredits = user.credits + 1;

        firebase.database().ref('users').child(user.id)
            .update({credits: newcredits})
            .then(() => {
                commit('CREDIT_CHANGED', user.id, newcredits)
            });

    }

돌연변이

CREDIT_CHANGED(state, userid, newcredits) {
        let user = state.users.find(user => {
            return user.id = userid
        });

        user.credits = newcredits;
    }

돌연변이 함수의 패턴은

function mutation(state, payload) {
...
// do something with state
state.person = payload;
...
}

그 2보다 더 이상 논쟁은 없다.

그래서, 당신의 돌연변이는 당신의 모든 정보와 함께 물체를 통과해야 합니다.다음과 같이 합니다.

CREDIT_CHANGED(state, payload) {
   let user = state.users.find(user => user.id === payload.userid);
   user.credits = payload.newcredits;
}

그런 다음 다음과 같이 커밋해야 합니다.

ADD_CREDIT({commit, state}, user) {

    const newcredits = user.credits + 1;

    firebase.database().ref('users').child(user.id)
        .update({credits: newcredits})
        .then(() => {
            commit('CREDIT_CHANGED', {
                 userid: user.id, 
                 newcredits: newcredits 
            })
        });

}

언급URL : https://stackoverflow.com/questions/47104229/vuex-changing-state-in-an-action