vuex直接修改state和commit异同点

在了解这个问题之前，我们首先要知道vuex是什么，用来解决什么问题。

引用vuex官网的一句话：

Vuex 是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

那什么是“状态管理模式”呢？

把组件的共享状态抽取出来，以一个全局单例模式管理，通过强制规则维持视图和状态间的独立性。

vuex用来解决的问题：

1、多个视图依赖于同一状态。

2、来自不同视图的行为需要变更同一状态。

那影响视图的状态修改有几种方法呢？

1、直接修改： this.$store.state.[变量] = xxx

2、使用commit修改：

this.$store.commit(commitType, payload)

this.$store.dispatch(actionType, payload)

那这两种方法有什么异同点呢？

相同点：都可以修改state，并且也会触发视图的更新

不同点：如果是在严格模式下strict: true，state的修改只要不经过mutation都会报错

那为什么建议使用commit修改state呢？

在项目中，每一个状态树对应项目的一个状态，每次mutation代表一次项目状态的改变，mutation就是为了使我们可以更加直观的观察到项目状态的变化。