浅谈vuex应用场景

导语:个人对于Vuex一点浅显的认识

vuex 作为 vue 生态中用于状态管理的一种模式,已被广泛应用于 vue 单页应用开发中。下面谈谈自己对 vuex 的一些个人见解以及在实际项目中的应用场景。

vuex 的几个核心概念

Store:Vuex 使用一个 Store 对象管理应用的状态,一个 Store 包括 State, Getter, Mutation, Action 四个属性。

State:State 意为“状态”,是 vuex 状态管理的数据源。

Getter:Getter 的作用与 filters 有一些相似,可以将 State 进行过滤后输出。

Mutation:Mutaion 是 vuex 中改变 State 的唯一途径(严格模式下),并且只能是同步操作。Mutaion 使得状态变得可追踪,配合一些 devtools 可以实现 time-travel 的调试体验。

Action:一些对 State 的异步操作可以放在 Action 中,并通过在 Action 提交 Mutaion 变更状态。

Module:当 Store 对象过于庞大时,可根据具体的业务需求分为多个 Module。

上图为官网中 vuex 各个要素的关系图,总的来说,我们可以在组件中触发 Action,Action 则会提交 Mutation,Mutaion 会对 State 进行修改,组件再根据 State 、Getter 渲染页面。

什么样的应用场景下需要 vuex ?

如果不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果你的应用够简单,那最好不要使用 Vuex。一个简单的 global event bus 就足够所需了。但是,如果需要构建是一个中大型单页应用,很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

vuex 一般用于中大型 web 单页应用中对应用的状态进行管理,对于一些组件间关系较为简单的小型应用,使用 vuex 的必要性不是很大,因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信,vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

使用 vuex 解决跨组件通信问题

跨组件通信一般指非父子组件间的通信,父子组件的通信一般可以通过以下方式:

1、通过 prop 属性实现父组件向子组件传递数据

2、通过在子组件中触发事件实现向父组件传递数据

非父子组件之间的通信一般通过一个空的 Vue 实例作为 中转站,也可以称之为 事件中心、event bus。

 // 创建事件中心实例

  let bus = new Vue()

  // 在组件 A 中触发事件

  bus.$emit('test', 1)

  // 在组件 B 中接受事件

  bus.$on('test', (id) => {

    // ...

  })

采用 event bus 的方式适合简单的跨组件事件触发,对于多层级组件嵌套等较为复杂的场景,使用 vuex 能更好地应对。vuex 是通过将 state 作为数据中心、各个组件共享 state 实现跨组件通信的,此时的数据完全独立于组件,因此将组件间共享的数据置于 State 中能有效解决多层级组件嵌套的跨组件通信问题。

vuex 作为数据存储中心

vuex 的 State 在单页应用的开发中本身具有一个“数据库”的作用,可以将组件中用到的数据存储在 State 中,并在 Action 中封装数据读写的逻辑。这时候存在一个问题,一般什么样的数据会放在 State 中呢? 目前主要有两种数据会使用 vuex 进行管理:

1、组件之间全局共享的数据

2、通过后端异步请求的数据

本人所在团队在实际的项目开发过程中更多的是应用第二种,即把通过后端异步请求的数据都纳入 vuex 状态管理,在 Action 中封装数据的增删改查等逻辑,这样可以一定程度上对前端的逻辑代码进行分层,使组件中的代码更多地关注页面交互与数据渲染等视图层的逻辑,而异步请求与状态数据的持久化等则交由 vuex 管理。

下面是一个使用 vuex 管理用户数据的 demo:

// Stateconst state = {

  userInfo: {}

}

// Mutaionconst mutations = {

  UPDATE_USER_INFO (state, payload) {

    state.userInfo = payload

  }

}

// Actionexport const fetchUserInfo = async ({commit}) => {

  // ... 请求用户数据

  // 调用 Mutaion 写入用户数据

  commit('UPDATE_USER_INFO', userInfo)

}

// Component// 在组件中引入 Action

...mapAction({

  fetchUserInfoAction: `fetchUserInfo`

})

// 在 method 中调用 Action

let res = self.fetchUserInfoAction()

总结

vuex 具体应用在哪取决于项目的规模以及具体的业务场景,可能是为了解决多层嵌套组件之间的通信问题,或是为了更好地管理应用中错综复杂的状态关系,而不能为了用 vuex 而在项目中使用 vuex。

---------------------------------------------------------------

原文作者,腾讯工程师Jeff。

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

浅谈移动端页面无刷新跳转问题的解决方案

45640
来自专栏FreeBuf

偏执的iOS逆向研究员:收集全版本的macOS iOS+越狱+内核调试

Intro 虽然“只有偏执狂才能够生存”这句话已经被假药停给毁了,但是作为一只有逼格的高大上的iOS逆向分析研究员,难道如果有现成的macOS/iOS全版本镜像...

49070
来自专栏互联网杂技

12条专业的JavaScript规则

习JavaScript是困难的。它发展的如此之快,以至于在任何一个特定的时刻,你都不清楚自己是否“做错了”。有些时候,感觉像是坏的部分超过了好的部分。然而,讨论...

36190
来自专栏张善友的专栏

MongoDB 客户端 MongoVue

今天在同事那里看到了一个很不错的MongoDB的客户端工具MongoVue,地址是http://www.mongovue.com/。做的不错,1.0版本的开始收...

67850
来自专栏JackieZheng

AngularJS in Action读书笔记1——扫平一揽子专业术语

前(fei)言(hua):   数月前,以一个盲人摸象的姿态看了一些关于AngularJS的视频书籍,留下了我个人的一点或许是指点迷津或许是误人子弟的读后感。自...

19970
来自专栏养码场

一个支付宝竟使用了30多个开源软件

大家都会使用支付宝,在支付宝中的“设置”选项中,有一项为“关于”,在版权信息中显示了所有使用的开源软件信息。不看不知道,一看吓一跳,原来支付宝居然使用了30多个...

22320
来自专栏美团技术团队

美团外卖前端可视化界面组装平台 —— 乐高

1 简介 乐高,是美团点评一个快速搭建后台系统页面的平台。名称来源于大家熟悉的丹麦知名玩具品牌,他们的玩具都是通过组合易拆卸、装配的零件,形成最终的作品。经过长...

1.1K40
来自专栏刘望舒

你必须要掌握的Android冷启动优化

事件发生在发包上线的前两天,在某某云进行移动测试时,提示冷启动速度低于平均值的问题,之前自己也曾尝试过优化,但是发现效果并不是很明显,作为一个有追求的开发者,趁...

40820
来自专栏葡萄城控件技术团队

【图解】FlexGrid Explorer 全功能问世

在去年的时候,我们推出了FlexGrid Demo,包含了FlexGrid的常用功能,如分组、滚动、冻结、自定义单元格类型、搜索面板、表格过滤器、树形结构、合并...

11830
来自专栏Jackson0714

【博客美化】03.分享按钮

407100

扫码关注云+社区

领取腾讯云代金券