美文网首页
Vuex使用场景

Vuex使用场景

作者: wade3po | 来源:发表于2019-02-10 20:14 被阅读80次

最近本着学习的心态,拉取了公司大佬最新架构的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个人笔记 公众号

相关文章

  • 通过一个简单实例了解vuex

    简单说明 什么是vuex,vuex怎么使用,什么场景下适合使用vuex, vuex 文档中都有介绍。看完文档之后,...

  • VUEX基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • vuex常见面试题

    1.vuex是什么?怎么使用?哪种功能场景使用它? 2.vuex有哪几种属性 3.不使用Vuex会带来什么...

  • Vuex使用场景

    最近本着学习的心态,拉取了公司大佬最新架构的vue项目好好研究一番。然而在vuex的使用上本人出现了很大的歧义。到...

  • vuex常见面试题

    (答案待更新...) 1.vuex是什么?怎么使用?哪种功能场景使用它? 2.vuex有哪几种属性 3.不使用Vu...

  • think - Vuex 使用场景

    目前是在做一个后台管理系统模板,目的是方便以后公司使用。 目前相对复杂的就是商品发布模块,其中商品的数据需要经过格...

  • vue - vuex 使用进阶(一)

    目录: 核心概念使用方法及场景:statemutationsactionsgetters 多页面公用vuex实例在...

  • Vuex之结构

    之前整理了vuex的使用场景,现在开始学习学习怎么使用。我会根据官网api来重新学习一遍。 首先我们要安装vuex...

  • 2020常见vue面试题

    什么是vuex?在那种场景下使用? vuex是全局状态管理工具,它有以下几个核心部分组成: state:存储数据;...

  • vuex的一些思考

    vuex其实就是一个升级版的eventBus,eventBus的原理很简单,就是个观察者模式,vuex的使用场景无...

网友评论

      本文标题:Vuex使用场景

      本文链接:https://www.haomeiwen.com/subject/xfossqtx.html