vuex多多，怎么当好一个奶妈

Posted 2021-11-30 bowen-liang

前言

vue 本身更偏向于 view 层的框架，尤大大并没有一开始就给他一个完整的 mvvm 架构。

在 vue 的世界里 vuex 是用来实现 mvvm 中关键的 vm 层（视图模型层），你甚至可以认为它就是 vue的奶妈，它总是可以为 vue的顺畅运行提供强大的支持。

什么是 MVVM

1. 从图中可以看到，所谓的 MVVM 指的有框架中的三个部分 M(Model)、 V(View)、 VM(ViewModel)

2. View:指的是视图层，我们一般通过html来实现它，它可以与 vm(视图模型)层 的数据数据进行双向绑定，同时也可以绑定 vm(视图模型) 层的事件处理方法。

3. Model：指的是数据模型层，它类似于一个数据的仓库，在很多情况下我们是通过 api层来实现数据支持，它可以读取和处理从服务端传过来的数据，或者把特定的数据加工后送到服务端。

4. ViewModel:指的是界面模型层，它包含了具体某个时刻界面状态的数据，更是可以把 M(模型)层的数据处理成合适界面显示结构，也可以把 V(视图)层生产出来的数据送给 M（模型）层。

vue组件提供的是一个 vm层的实现，在没有引入vuex的情况下，这会导致 vue 组件非常重、代码复用率低。

VUEX 是什么

• 它是一个组件状态的管理工具，你可以认为它更贴近于界面而不是数据，但实际上它是充当了界面和数据的桥梁（这正是 vm 层的定义）。

   

• 所以其实我们还需要实现一个 m 层，一般情况下我们只需要用纯的 js 来实现一个数据的增删改查处理的层便可(你可以认为是 api 层）。

   

VUEX 运行原理

vuex 提供的是一套状态管理的模式，简单点说就是把当前应用的所有界面组件的状态集中存储在一个唯一的对象中，同时该对外提供一套标准的状态消费及维护接口。

从图中可以看到 vuex 主要做了这么几件事

1. 从 api (模型)层读入数据同时也可以把数据发送给模型层

2. 把从模型层读取到的数据，通过 mutation写入到 state当中

3. state会作为视图数据直接提供给 组件进行消费使用

4. 组件可以把用户的行为（界面事件）输送给 actions

总结

在使用 vuex我们很有必要先理解好 mvvm的开发模式，好的设计是成功的一半,用好 vuex这个 vue的 vm层，可以让我们的开发更加的得心应手。

 

欢迎关注同名公众号，一起讨论前端技术。

---

Thanks!