如何在 Vuex 中订阅状态变化

关注我，持续分享逻辑思维&管理思维&面试题； 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导；

推荐专栏《10天学会使用asp.net编程AI大模型》，目前已完成所有内容。一顿烧烤不到的费用，让人能紧跟时代的浪潮。从普通网站，到公众号、小程序，再到AI大模型网站。干货满满。学成后可接项目赚外快，绝对划算。不仅学会如何编程，还将学会如何将AI技术应用到实际问题中，为您的职业生涯增添一笔宝贵的财富。

-------------------------------------正文----------------------------------------

在 Vuex 中，订阅状态变化通常是通过 store.subscribe 方法来实现的。这个方法允许你监听 store 中的 mutation 或 action 的执行，但需要注意的是，store.subscribe 并不直接提供状态变化后的新状态值，而是提供了触发状态变化的 mutation 对象（对于 mutation 订阅）或 action 的描述（对于 action 订阅，但通常 action 订阅不常用，因为 action 是异步的，并且不直接修改状态）。

如果你想要根据状态变化来执行某些操作，并且需要访问变化后的状态，你应该在 mutation 的处理函数中直接进行，或者通过 getter 来获取计算后的状态。

然而，如果你确实需要在 store 外部订阅状态变化，并访问变化后的状态，你可以这样做：

订阅 mutation

// 假设你已经有了 Vuex store 实例  
const unsubscribe = store.subscribe((mutation, state) => {  
  // mutation 是一个包含 type 和 payload 的对象  
  // state 是当前应用的状态  
  console.log(mutation.type);  
  console.log(state); // 这里可以访问到变化后的状态  
  
  // 根据 mutation.type 来执行不同的逻辑  
  if (mutation.type === 'some/mutation/type') {  
    // 执行一些操作...  
  }  
});  
  
// 当你想停止订阅时  
unsubscribe();

订阅 action（不推荐用于状态变化监听）

虽然可以订阅 action，但通常不建议这样做来监听状态变化，因为 action 是异步的，并且不直接修改状态。不过，如果你需要知道某个 action 被调用了，可以这样做：

store.subscribeAction((action, state) => {  
  // action 是一个包含 type、payload 和 context 的对象  
  // state 是调用 action 时的状态（注意：这不一定是 action 完成后的状态）  
  console.log(action.type);  
  // 注意：这里不能直接访问到 action 完成后的状态  
});

使用 Getter 响应状态变化

在大多数情况下，你不需要直接订阅状态变化。相反，你可以在 Vue 组件中通过计算属性（computed properties）和 Vuex 的 getter 来响应状态变化。Getter 允许你定义一些基于 store 中状态的派生状态，这些派生状态会在相关状态变化时自动更新。

// 在 Vue 组件中  
computed: {  
  // 使用 getter 来获取派生状态  
  someComputedProperty() {  
    return this.$store.getters.someGetter;  
  }  
}

总结

• 使用 store.subscribe 来订阅 mutation，并在回调函数中访问变化后的状态。
• 谨慎使用 store.subscribeAction，因为它主要用于监听 action 的调用，而不是状态变化。
• 在 Vue 组件中，通常通过计算属性和 getter 来响应状态变化。
• 尽量避免在 store 外部直接修改状态或执行复杂的逻辑，以保持应用的清晰和可维护性。

感兴趣的同学辛苦 关注/点赞 ，持续分享逻辑、算法、管理、技术、人工智能相关的文章。

有意找工作的同学，请参考博主的原创：《面试官心得--面试前应该如何准备》，《面试官心得--面试时如何进行自我介绍》， 《做好面试准备，迎接2024金三银四》。
或关注博主免费专栏【程序员宝典--常用代码分享】里面有大量面试涉及的算法或数据结构编程题。

博主其它经典原创：《管理心得--如何高效进行跨部门合作》，《技术心得--如何成为优秀的架构师》、《管理心得--如何成为优秀的架构师》、《管理心理--程序员如何选择职业赛道》，及
《C#实例：SQL如何添加数据》，《C#实战分享--爬虫的基础原理及实现》欢迎大家阅读。