前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vuex使用场景

Vuex使用场景

作者头像
wade
发布2020-04-24 17:21:20
9490
发布2020-04-24 17:21:20
举报
文章被收录于专栏:coding个人笔记coding个人笔记

最近本着学习的心态,拉取了公司大佬最新架构的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获取数据。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-12-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档