浅谈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 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

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

3304
来自专栏HTML5学堂

CSS检查工具-CKStyle

HTML5学堂:CSS代码存在压缩工具、检查工具以及重排属性的工具。今天推荐给大家CKStyle这个工具,顺便也来看看其他的一些工具。 各类CSS检查工具 首先...

3856
来自专栏天天P图攻城狮

iOS基础开发实践:iMessage Extension浅析

2122
来自专栏养码场

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

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

1432
来自专栏Android工程师的修仙之旅

【小程序+云开发】实战:一天搭建小型论坛

笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数、数据库、存储三大能力。关于云开发,可参考文...

8408
来自专栏Golang语言社区

转-liteIDE 快捷键改装

LiteIDE改装 最近一直都在使用liteIDE做开发。公司的项目很紧张,但是在这个周末。还是偷偷的对liteIDE小不爽的地方进行了一些小的改造。 IDE上...

4765
来自专栏前端架构与工程

前后端分离和模块化-58到家微信首页重构之路

微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题: 每个城...

2328
来自专栏美团技术团队

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

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

8534
来自专栏程序猿DD

如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容

相信有很多童鞋跟我一样,热衷于用Markdown来编写文章。由于其简单的语法和清晰的渲染效果,受到广大码农朋友们的推崇。但是,当我们想维护起自己的公众号时,公众...

4297
来自专栏Golang语言社区

Go语言并发模型的2种编程方案

概述 我一直在找一种好的方法来解释 go 语言的并发模型: 不要通过共享内存来通信,相反,应该通过通信来共享内存 但是没有发现一个好的解释来满足我下面的需求: ...

3269

扫码关注云+社区