Question

是否建议在突变处理程序中执行状态突变，即使您没有通过state参数访问状态？

让我举个例子。

const store = new Vuex.Store({
    state: {
        foo: [{ name: 'bar' }]
    },
    mutations: {
        changeName1 (state, payload) {
          state.foo[0].name = payload.name
        },
        changeName2 (state, payload) {
          let { item, name } = payload
          item.name = name
        }
    }
})

// Inside a component
this.$store.commit('changeName1', { name: 'foobar' })

// Inside a component
this.$store.commit('changeName2', {
    item: this.$store.state.foo[0],
    name: 'foobar'
})

在第一次提交中，您通过state参数找到要变异的对象。

在第二次提交中，在提交之前找到要变异的对象并使用有效负载传入。这种方式使变异处理程序更通用，它不必知道如何找到要变异的对象。然而，它看起来很奇怪＆＃34;因为几乎所有我见过的变异示例都访问了state参数。

我问这个是因为我发现自己随意改变了商店中嵌套对象的属性，并想知道我是否应该在商店内执行所有突变。我正在谈论像翻转布尔属性这样的死亡简单突变。是否真的值得编写变异样板来做到这一点？

Answer 1

是否真的值得编写变异样板来做到这一点？

是的，因为您可以跟踪实际发生的情况。可以手动或通过vue-devtool等工具跟踪变异。它还会迫使您不要在任何地方简单地编辑您的商店，而是始终通过一个允许您使用通用方式输入数据的突变。此外，您还可以以相同的方式对所有传入数据执行操作。

这是你不应该做的事情，因为你可以通过state.foo[0]简单地访问变异中的状态。您只需提交name。

即可

this.$store.commit('changeName2', {
    item: this.$store.state.foo[0],
    name: 'foobar'
})

Vuex深状态突变的最佳实践

1 个答案: