Question

我尝试编码为＃34;良好做法＆＃34;学习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;
    }

Answer 1

突变功能的模式是

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

它没有任何论据而不是那个。

因此，您的突变应该传递包含所有信息的对象。像这样：

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 
            })
        });

}

Vuex，改变动作中的状态

1 个答案: