将 vuex store 的一部分作为 action 的负载分派是否正确?

Is it right to dispatch a part of the vuex store as a payload of an action?

我对这家 vuex 商店有一些疑问

export default {
    state: {
        resultSet: [
            {
                name: "result 1"
                deep: {
                    inside: {
                        isLoading: false
                    }
                }
            },
            {
                name: "result 2"
                deep: {
                    inside: {
                        isLoading: false
                    }
                }
            },
        ]
    },
    actions: {
        /*
        r is an item of the resultSet in the store (so r is a part of the store)
        */
        sendQuery(context, r) {
            //Here I mutate r directly (it means that I mutated the store directly without commit a mutation)

            r.deep.inside.isLoading = true;

            //Everything work, the UI is updated along with the state changes, but I'm not sure that 
            //I'm doing the right thing (mutate the store indirectly without committing a mutation)
        }
    }
}

问题:

  1. 派发商店的一部分作为动作的有效载荷是否正确? => 该动作可能会直接改变 r 的状态。

  2. 在上面的动作中变异r.deep.inside.isLoading=true对吗?

  1. Is it right to dispatch a part of the store as a payload of an action? => the action might directly change the state of r.

状态在有效载荷中是可以的。但是动作不能直接修改状态。

  1. Is it right to mutate r.deep.inside.isLoading=true in the above action?

没有。来自 docs:

Instead of mutating the state, actions commit mutations.

Actions 应该只 commit mutations(有点像 Vuex 中的 "event bus" and/or mutex)。

派发其他类似事件的动作(类似于事件本身)似乎很愚蠢,但是突变事件("commits")有特殊的规则,例如 they must be synchronous,而动作可以在提交突变之前执行异步任务。

在你开发的时候利用strict mode,这样 Vuex 肯定会在你错误地修改状态时通知你。