Vuex使用场景

最近本着学习的心态,拉取了公司大佬最新架构的vue项目好好研究一番。然而在vuex的使用上本人出现了很大的歧义。到底什么场景使用vuex?于是搜集了一些资料,但是没有太权威的文章,只能结合资料整理了一些本人自己的观点。

先看一下官网给出的:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vue一般是单项数据流,于是:

当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

多个视图依赖于同一状态。

来自不同视图的行为需要变更同一状态。

问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。

问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想,借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

这是官网给出的定义,而在我的理解就是:应用遇到多个组件共享状态时,使用vuex。

于是我整理了以下几点:

涉及非父子组件之间跨组件共享数据

组件基于数据创建,多个组件使用这个数据,各组件之间的联系不可预料

同一个数据在不同页面控制某个属性,且多个页面都能修改这个数据

好吧,实在编不下去了,总结来总结去就是多个组件共享数据或者是跨组件传递数据,这些场景下使用vuex,但是一个子组件只在这个父组件之中使用,这是强耦合的,那么就应该放在页面的data里面。

或许是见识和经验的问题,没有做过大型项目,没有遇见数据驱动组件的项目,也没有做过太多组件之间共享的项目,有人说全部放入vuex对于数据链直观,易维护等等。但是还是不明白为什么要把data迁移到vuex里面,然后建立各个页面专门的store。再用computed获取数据。

欢迎关注Coding个人笔记 公众号

转载于:https://juejin.im/post/5c54fc33f265da2db87b7b8d

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值