Vue项目中严格模式和Vuex的关系是什么

Vuex 严格模式强制通过 commit 方法修改状态，防止意外修改带来的错误。它通过检查状态变化，发现直接赋值修改时抛出警告。严格模式有助于发现 bug、提高可维护性和协作效率，但也会增加运行时开销，需要权衡利弊。

(图1)

Vue 项目中严格模式和 Vuex 的纠缠不清

这篇文章的目的很简单：理清 Vue 项目中严格模式和 Vuex 之间的关系，帮你避免一些常见的坑，写出更高效、更易维护的代码。读完之后，你将对 Vuex 的运作机制有更深入的理解，并能更好地运用严格模式来提升应用的健壮性。

先从基础知识说起。Vuex 是 Vue.js 的状态管理库，它采用单一状态树的模式，集中管理应用的所有状态。这就好比一个中央数据库，所有组件都能访问和修改数据，但必须通过 Vuex 提供的 API 来进行操作，从而保证数据的一致性和可预测性。

严格模式 (strict mode) 是 Vuex 提供的一个选项，它强制要求你只能通过 commit 方法来修改状态。这意味着你不能直接修改 store.state 对象中的任何属性。听起来可能有点限制，但它带来的好处是巨大的：它能帮你尽早发现代码中的 bug，避免因为意外修改状态而导致难以追踪的错误。

严格模式的工作原理其实很简单：它在每次状态发生变化时都会进行检查，如果发现状态是通过直接赋值修改的，就会抛出一个警告。这个警告能让你及时发现问题，并纠正错误的代码。这就像给你的状态管理系统装上了一个安全锁，防止意外的“越狱”。

立即学习“前端免费学习笔记（深入）”；

来看个简单的例子，感受一下严格模式的威力：

// 启用严格模式
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  strict: true // 关键在这里
})

// 正确的做法：通过 mutation 修改状态
store.commit('increment')

// 错误的做法：直接修改状态，会触发警告
store.state.count++