vuex : $store.commit vs 直接调用函数

Question

我发现您可以将存储突变函数传递到 HTML 事件中，例如：

//In the template

<input name="the_field" :value="the_field" @input="updateField"/>

// In the component

methods: {
    ...mapMutations(["updateField"])
}

// In the store

state: {
    the_field: "a value"
},
mutators: {
    updateField (state, e) {
        state[e.target.name] = e.target.value;
    }
}

因此，只需将事件作为有效负载传递，我就可以为特定范围提供通用字段更新功能，只要设置名称即可。

阅读文档和人们谈论的内容是使用this.$scope.commit("function_name", body)，甚至用于从输入更新字段。在示例中，我需要编写一个进行该调用的组件方法，可能会挑选出特定数据，例如this.$scope.commit("updateField", {name: e.target.name, value: e.target.value})。传递事件对象是否存在性能问题？更重要的是，直接调用突变函数与使用$store.commit 是否可以？

Answer 1

传递事件对象是否存在性能问题？

并非如此，您必须经常传递默认事件，因为如果您传递自己的有效负载，它不会再传递给您的函数或方法。

直接调用变异函数与使用 $store.commit 是否可以？

这并不重要，如果您直接使用突变更改状态或调用操作并使用提交。它更多地与一般软件设计有关。突变会改变你状态的一件事。动作可以调用多个突变。如果您想更改状态的多项内容，则应使用触发这些更改的操作。这样，您的软件就变得更易于维护和调试。