vuex结构图

发送请求：HTTP协议的通信那内容

发送请求

更新状态数据Commit()

1，遇见html标记，浏览器调用html解析器解析成token 并构建成 dom 树2，遇见style/link 标记，调用css解析器，处理css标记并构建cssom树3，遇到script标记，调用js解析器，处理js代码，（绑定事件，修改dom 树或 cssom树）4，将dom树和cssom 树合并成一个渲染树5，根据渲染树计算布局 ，然后将各个节点颜色渲染注意：不一定按顺序布局，如果dom或css树被修改了，可能执行多次布局和渲染

Getters

mapState()  映射函数$store.state

响应报文

Backend API

直接更新

将域名解析成IP地址：1，浏览器DNS缓存2，系统DNS缓存3，路由器DNS缓存 4，运营商DNS缓存5，递归搜索 在不同域名下查找

url输入

渲染页面

四次挥手1，浏览器发请求报文给服务器，说发完了2，服务器接受请求报文，告诉浏览器，接受完了，准备关闭3，服务器发响应报文给浏览器，准备关闭4，浏览器接受响应报文，关闭吧

vuex

mapGetters()$store.getters取计算属性

更新状态数据$store.dispatch()

从state读数据技计算

接受响应

TCP链接，三次握手

Mutations

断开连接

Devtools

vue components

1，浏览器告诉服务器，要发送2，服务器告诉浏览器，可以赶紧发吧3，浏览器告诉服务器，我要发了

Actions

与后台通信

State

Vuex: 状态管理器的 vue 插件，集中管理多个组件的共享状态和后台获取的数据。

DNS解析

mapActions()