详细说明了在vue-vuex中使用提交来提交突变来修改状态的方法

在vuex中，关于修改状态的方法，您需要提交提交突变。官方文件中有这样一句话：

改变Vuex商店状态的唯一方法就是进行变异。

为了找出原因，我查阅了很多资料，发现别人在做vuex的源代码分析时，并没有把这一点说清楚。

所以我要自己去查vuex的源代码，做演示来验证。

但是经过实验发现，当直接修改状态时，可以改变存储中的状态，并且是响应的，没有报错。这和commit提交突变的方式没什么区别。

后来在github上认识了一个朋友，提醒我试试在严格模式下会发生什么。

1.两种状态修改方式的区别

我在vuex的官方文件中看到了严格模式的描述：

要开启严格模式，只需要通过strict: true即可；创建商店时；

在严格模式下，只要发生状态变化，就会抛出一个错误，这个错误不是由突变函数引起的。这确保调试工具可以跟踪所有状态更改。

因此，vuex设置为严格模式。

直接修改状态发现控制台确实报告了一个错误，但是状态被成功修改并且仍然有响应。

错误提示：

不要在变异处理程序之外变异vuex存储状态。

通过提交提交变异修改状态时，vue调试工具可以记录状态的每一次变化，方便调试。但是，如果直接修改状态，则没有这样的记录。

提交修改状态源代码分析

上面已经讨论过，在严格模式下，直接修改状态会导致错误。然后通过分析源代码找出答案。

首先，您应该分析提交函数的代码，因为变异是通过提交函数执行的。

在提交函数中，状态会因此而修改。_commit()函数。那么什么是_withCommit，然后看看_withCommit的代码：

withCommit函数的参数fn是修改状态的函数。设置这个。_在执行fn()之前提交为true。执行fn()后，恢复其值。_提交。那为什么要设置这个。_withCommitting to true，其效果如何？在vuex/src/store.js的开头，找到了判断严格模式的代码：

这三行代码很简单：当vuex设置为严格模式时，将执行enableStrictMode函数。那么enableStrictMode到底是什么？

在enableStrictMode函数内部，调用$watch函数来观察状态的变化。当状态改变时，将调用assert函数来确定store的值。_提交(也就是这个。_以上提交)。如果不是真的，将报告一个异常：

不要在变异处理程序之外变异vuex存储状态。

因此，如果直接从外部修改状态，则不会执行提交函数，因此也不会执行_withCommitting函数，并且该。_withCommitting不正确。因此，当执行enableStrictMode时，会执行assert函数，因为_ withcommitting不为真，所以会报告异常。

结论

综上所述，在vuex中，最好将其设置为严格模式，并根据文档的要求，通过提交提交突变来修改状态，而不是直接修改状态。否则控制台会报错，vue调试工具不会记录状态的变化，所以无法调试。

以上对vue-vuex中使用commit提交变异修改状态方法的详细说明，都是边肖分享的内容，希望能给大家一个参考和支持。