Vuex，在动作中改变状态答案

【问题标题】：Vuex, changing state in an actionVuex，在动作中改变状态
【发布时间】：2018-04-16 16:26:16
【问题描述】：

在学习 Vuex 时，我正在尝试尽可能地编写“良好实践”的代码。

据我所知，我认为 Actions 用于执行例如外部 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;
    }

【问题讨论】：

标签： firebase firebase-realtime-database vue.js vuejs2 vuex

【解决方案1】：

变异函数的模式是

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

}

【讨论】：

非常感谢！我错过了重点！完美的答案。