Skip to content

全局状态管理工具,诸如vuex/redux/pinia/mobx

1.理解使用场景

主要的作用就是在一个组件改变数据(全局数据)的时候,希望另一个组件立即产生变化(这个数据多个组件都可以进行操作)——> 响应式的更新

注意:千万不要说数据的存储,因为本质上这不是vuex所做的事情,但是可以说这个数据状态的生命周期是页面刷新之前(注意不是应用销毁之前),只要页面不刷新,状态就在全局存在(和组件的销毁无关)!

2.真实使用的情况

可以在父组件中有数据,想传递给子组件,但是子组件是用router-view动态渲染的,这时候用props就不好传值了,我们最好把数据维护在vuex里面,以便子组件可以迅速做出反应!

注意:这个时候用发布订阅也是可以的!

3.特点的总结

1.响应式:说到底,全局状态管理工具诸如vuex等本质上都是为了实现响应式,并且统一维护状态 ——> 可以响应式

这和vue中的provide+inject有很大的区别!——> 不能响应式

provideinject 是用于在 Vue.js 中实现依赖注入的功能,而不是用于实现响应式数据更新的。

当你使用 provide 提供数据时,该数据不会自动实现响应式更新。它们是简单的 JavaScript 对象,而不是 Vue.js 的响应式数据对象。因此,如果 provide 中的数据发生变化,inject 的组件不会自动更新。

如果你希望在 provide 的数据变化时通知所有依赖的组件进行更新,可以考虑使用 Vuex 或 Vue.js 的自定义事件机制,或者通过创建一个响应式的 Vue 实例来实现。

2.数据流:多向任意组件的数据流

问:如果父组件有子组件,子组件又有子组件,这个时候使用props可以实现响应式更新吗?

可以,但是你需要确保在父组件中的数据是响应式的(也就是定义在data里面的),并且在子组件中使用的是响应式的数据。

如果 parentData 在父组件中发生变化,父组件会监听这个变化并更新,然后传递给子组件 ChildComponentchildProp 也会更新,最终更新到 GrandchildComponentgrandchildProp。但需要注意,这仍然是单向数据流(如果使用v-model绑定数据就可以实现双向数据流了,但是本质上是用了props+自定义事件),即父组件更新会自动更新子组件,但子组件的更新不会影响到父组件。——> 无法实现双向数据流,vue本质是单项数据流

注意:全局状态管理工具则实现了任意组件之间的双向数据流!一个组件修改数据,其他组件都一定会做出响应! ——> 实现多向数据流