标签:接口 tty page api sub 生产 vuex int 用户
前言
vue
本身更偏向于 view 层的框架,尤大大并没有一开始就给他一个完整的 mvvm 架构。在
vue
的世界里vuex
是用来实现mvvm
中关键的vm
层(视图模型层),你甚至可以认为它就是vue
的奶妈,它总是可以为vue
的顺畅运行提供强大的支持。
从图中可以看到,所谓的 MVVM
指的有框架中的三个部分 M(Model)
、 V(View)
、 VM(ViewModel)
View
:指的是视图层,我们一般通过html来实现它,它可以与 vm
(视图模型)层 的数据数据进行双向绑定,同时也可以绑定 vm
(视图模型) 层的事件处理方法。
Model
:指的是数据模型层,它类似于一个数据的仓库,在很多情况下我们是通过 api
层来实现数据支持,它可以读取和处理从服务端传过来的数据,或者把特定的数据加工后送到服务端。
ViewModel
:指的是界面模型层,它包含了具体某个时刻界面状态的数据,更是可以把 M
(模型)层的数据处理成合适界面显示结构,也可以把 V
(视图)层生产出来的数据送给 M
(模型)层。
vue
组件提供的是一个vm
层的实现,在没有引入vuex的情况下,这会导致vue
组件非常重、代码复用率低。
它是一个组件状态的管理工具,你可以认为它更贴近于界面而不是数据,但实际上它是充当了界面和数据的桥梁(这正是 vm
层的定义)。
所以其实我们还需要实现一个 m
层,一般情况下我们只需要用纯的 js
来实现一个数据的增删改查处理的层便可(你可以认为是 api 层)。
vuex 提供的是一套状态管理的模式,简单点说就是把当前应用的所有界面组件的状态集中存储在一个唯一的对象中,同时该对外提供一套标准的状态消费及维护接口。
从图中可以看到 vuex
主要做了这么几件事
从 api
(模型)层读入数据同时也可以把数据发送给模型层
把从模型层读取到的数据,通过 mutation
写入到 state
当中
state
会作为视图数据直接提供给 组件
进行消费使用
组件可以把用户的行为(界面事件)输送给 actions
在使用 vuex
我们很有必要先理解好 mvvm
的开发模式,好的设计是成功的一半,用好 vuex
这个 vue
的 vm
层,可以让我们的开发更加的得心应手。
欢迎关注同名公众号,一起讨论前端技术。
Thanks!
标签:接口 tty page api sub 生产 vuex int 用户
原文地址:https://www.cnblogs.com/bowen-liang/p/vuex-mvvm-about-vue.html