我们知道在vueX中获取state数据可以通过this.$store.state.变量名进行获取，那么按常理来说，要想修改这个变量我们重新给他赋个值就行了。

下面的代码证明不通过mutation，而直接修改state修改确实生效了：

const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment(state) {
			state.count++
		}
	}
})
console.log(store.state.count) //0
store.state.count = 3;
console.log(store.state.count) //3

其中，这样修改的话，store中的state数据可以改变且是响应式，浏览器控制台并无报错信息输出，但是不建议这样做。

官方不建议这么做是因为直接赋值的话我们VUEX无法对这个变量进行跟踪，无法得知state中的helloWorld变量在哪里被修改了，官方文档解释原因如下：

开启严格模式，仅需在创建 store 的时候传入 strict: true； 在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到

throw error :    
[vuex] Do not mutate vuex store state outside mutation handlers

所以：

不经过mutations不能直接修改state中的数据，因为state是实时更新的，如果直接修改state中的数据是异步操作，当state异步还没有执行完，state的数据就有可能发生变化，会导致程序出问题，所以必须通过mutations限制state不允许异步操作。故更改Vuex 的store 中的状态的唯一方法是提交commit

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12231