Vuex Store Watch 怎么用？

在 Vue.js 项目中，Vuex 是一个用于管理应用程序状态的强大工具，而 Vuex Store 的 watch（监听）功能则是开发者们在处理状态变化时经常会用到的，Vuex Store Watch 到底该怎么用呢？下面我们就来详细探讨一下。

Vuex Store Watch 的基本概念

Vuex 中的 Store 是存储应用程序状态的地方，而 watch 就是对 Store 中的状态进行监听，当被监听的状态发生变化时，我们可以执行相应的操作，比如说，我们有一个电商应用，Store 中有一个状态是购物车的商品数量，当这个数量发生变化时，我们可能希望更新页面上显示购物车数量的地方，或者进行一些其他的业务逻辑处理，这时候就可以用到 watch。

如何在 Vue 组件中使用 Vuex Store Watch

（一）简单的状态监听

我们需要在 Vue 组件中引入 Vuex，假设我们的 Store 中有一个名为 `count` 的状态，在 Vue 组件的 `created` 生命周期钩子函数中，我们可以这样写：

```javascript export default { created() { this.$store.watch( (state) => state.count, (newValue, oldValue) => { console.log(`count 从 ${oldValue} 变为了 ${newValue}`); // 这里可以写你想要执行的操作，比如更新页面元素等 } ); } }; ```

上面的代码中,第一个参数是一个函数，它接收 `state` 作为参数，返回我们要监听的状态（这里是 `count`），第二个参数也是一个函数，它接收 `newValue`（新值）和 `oldValue`（旧值）作为参数，当 `count` 变化时，这个函数就会被调用。

（二）深度监听

如果我们要监听的状态是一个对象或者数组,并且希望在其内部属性发生变化时也能触发监听，就需要用到深度监听，Store 中有一个 `userInfo` 对象：

```javascript export default { created() { this.$store.watch( (state) => state.userInfo, (newValue, oldValue) => { console.log('userInfo 发生了变化'); }, { deep: true } ); } }; ```

通过设置 `{ deep: true }`，即使 `userInfo` 对象内部的属性（`userInfo.name`）发生变化，也会触发监听函数。

（三）组件销毁时取消监听

为了避免内存泄漏,当组件销毁时，我们应该取消对 Store 状态的监听，可以在 `beforeDestroy` 生命周期钩子函数中进行操作：

```javascript export default { data() { return { watcher: null }; }, created() { this.watcher = this.$store.watch( (state) => state.count, (newValue, oldValue) => { console.log(`count 从 ${oldValue} 变为了 ${newValue}`); } ); }, beforeDestroy() { if (this.watcher) { this.watcher(); } } }; ```

这里我们把 `watch` 返回的取消监听函数赋值给了 `watcher`，在 `beforeDestroy` 中调用它来取消监听。

Vuex Store Watch 的应用场景

（一）数据联动更新

在一个复杂的应用中,可能有多个组件依赖于同一个 Store 状态，当这个状态变化时，通过 watch 可以让相关组件及时更新自己的显示或行为，比如在一个新闻应用中，Store 中有一个 `currentNewsId` 状态，多个组件（如新闻详情组件、评论组件等）都依赖它，当 `currentNewsId` 变化时，通过 watch 可以让这些组件加载对应的新闻数据和评论数据。

（二）业务逻辑处理

除了更新界面,watch 还可以用于处理一些业务逻辑，比如在一个任务管理应用中，Store 中有一个 `tasks` 数组（存储所有任务）和一个 `completedTasks` 状态（存储已完成任务的数量），当 `tasks` 数组发生变化（比如新增、删除任务）时，通过 watch 可以重新计算 `completedTasks` 的值，并根据新的值进行一些业务判断（如是否显示“所有任务已完成”的提示）。

（三）与后端交互

Store 状态的变化可能需要触发与后端的交互，在一个电商应用中，Store 中有一个 `cartItems` 数组（购物车商品），当 `cartItems` 发生变化（比如用户添加或删除商品）时，通过 watch 可以将最新的购物车信息发送给后端进行保存，以保证数据的一致性。

使用 Vuex Store Watch 的注意事项

（一）性能问题

深度监听（`deep: true`）虽然方便，但如果被监听的对象或数组非常大，频繁的变化可能会导致性能问题，因为深度监听需要遍历对象或数组的所有属性来检测变化，所以在使用时要谨慎，尽量避免不必要的深度监听，如果可以通过其他方式（如明确知道某个属性会变化，单独监听该属性）来实现需求，就不要使用深度监听。

（二）监听函数的复杂度

监听函数应该尽量简洁,如果监听函数中包含大量复杂的逻辑（如大量的计算、多次 API 调用等），可能会影响应用的性能和响应速度，可以考虑将一些复杂的逻辑封装成单独的函数，在监听函数中调用这些函数，以提高代码的可读性和可维护性。

（三）状态变化的频率

如果被监听的状态变化非常频繁（比如每秒变化多次），要注意监听函数的执行是否会带来不必要的开销，可以根据实际情况，考虑使用防抖（`debounce`）或节流（`throttle`）技术来优化，在一个搜索框应用中，Store 中有一个 `searchKeyword` 状态，用户输入时会频繁变化，如果每次变化都触发搜索（通过 watch 监听 `searchKeyword` 变化并调用搜索 API），会造成大量不必要的 API 请求，这时候可以使用防抖技术，让搜索操作在用户输入停止一段时间后再执行。

Vuex Store Watch 是 Vuex 中一个非常实用的功能，它可以帮助我们更好地处理 Store 状态变化带来的各种需求，通过本文的介绍，我们了解了它的基本概念、在 Vue 组件中的使用方法（包括简单监听、深度监听和取消监听）、应用场景以及使用时的注意事项，在实际开发中，我们要根据具体的业务需求，合理地运用 Vuex Store Watch，以提高应用的性能和用户体验，希望本文能对大家在使用 Vuex Store Watch 时有所帮助。