Vuex，在动作中改变状态

Posted 2023-02-22

【中文标题】Vuex，在动作中改变状态

【英文标题】：Vuex, changing state in an action

【发布时间】：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;
    

【参考方案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 
            )
        );

【讨论】：

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