先行者计划--1107微课 《什么是Vuex?》| 文字简版
vuex是什么东西?
官网对Vuex的定义,"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。"
恩,从这句话可以看出,它应该是一种编写js的思路,并不是一种新的技术。做什么什么的模式嘛,就是“这个事儿该怎么做”的意思呗。
接下来,"它采用集中式存储,管理vue应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。"
这个就是说,集中式存储,就是把vue应用的所有的状态放在一个统一的地方。所有要使用状态的角色都来这里获取状态,兄弟组件传递信息不用再找爸爸了。那么放哪了呢?你可以暂且认为这是一个全局变量的套路。
我们说,一切工具都是为了需求服务的。
现在看来,这个vuex就是为管理"状态"而服务的。
你把门打开,门的状态从关转换为开;
你把开关从横转到竖,开关的状态从横向转换为纵向;
你从左到右拖动网页上的按钮,它的位置坐标x发生了变化。
这些变化的就是状态,就是此物现在是什么样。开的?关的?横的?竖的?
状态的改变,是因为我们的行为改变了它的外观。
反过来说,也是事物的表现层对我们的action做出了反馈。
即,改变了事物的状态,就是改变了事物的外观(表现层,view)。
回到网页上来讲,组件的状态就是”这个组件现在什么样“。 把所有的组件”现在是什么样?“都统一的保存的一个地方,就是”集中式存储管理应用的所有组件的状态“。
引申开去的讲,前端所有会引起变化的,例如click,drap,load,ajax,show,hide
等等,都会引起变化,同时,它们也都是“状态”,而vuex要管理的,也就是它们所引起的变化。
以上这些关于vue状态的描述,都是我个人主观的理解。
关于"状态"的描述,未必完全正确,但我认为大方向应该没有错。
<!-- 虽不中,亦不远矣。 -->
刚才说了,可以暂且把vuex的状态管理当成一个全局变量来看待。
但现在我们要说一下它和全局变量的区别:
1,vuex中存储的state是响应式的。
每当store中的state变化,那么components的view也相应的会得到update;
2,改变store中的state的唯一方法,就是commit mutations
,提交变化。
<!-- -->
Vuex使用store对象来保存和管理整个应用的状态,
在store里包含以下对象,
-- state – 存放状态
-- getters – state的计算属性 (是不是感觉很像redux中的reducers?)
-- mutations – 更改状态的逻辑,同步操作
(是不是感觉有点像redux中的subscribe?)
-- actions – 提交mutation,异步操作
(会不会感觉有点像 redux当中 的dispatch({type.xxx})
? )
-- mudules – 将store模块化
因为vue应用是模块化的开发,所以组件的状态在state中的保存方式,
必然也是按对应的模块的结构来保存的。
<!-- -->
官方的说法:
state,驱动应用的数据源;(所有状态保存在这)
view,以声明方式将state映射到视图;(改变状态引发表现层变化)
actions,响应在view上的用户输入导致的状态变化。(事件改变状态)
<!-- -->
现在可以确定,Vuex的核心就是store[stɔ:(r)]对象。
因为是统一管理状态的,所以每个vue应用只能有一个store对象。
在它里面包含着此应用中的状态,state。
注意:
数据流都是单向的
组件能够调用 action
action 用来派发 Mutation
只有 mutation 可以改变 state
store 是响应式的,无论 state 什么时候更新,组件都将同步更新
这是一个最简章的vuex的结构:(它不能运行,因为它只是结构)
这里的参数是一个对象,它就是redux中的reducers,也就是计算的过程。 只不过在这个dmeo中,它带有逻辑和事件、状态
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
// 用来从 store 获取 Vue 组件数据
},
mutations: {
// 更改state中状态的逻辑,同步操作
},
actions: {
// 提交mutation,异步操作
// 可以给组件使用的函数
},
modules: {
a: moduleA,
b: moduleB,
// ...
}
});
<!-- 截图很清晰,代码也很简单 -->
- mysql主从同步(3)-percona-toolkit工具(数据一致性监测、延迟监控)使用梳理
- 网站压力测试软件WebBench以及压测Jexus
- Gershon Dublon & Nan Zhao:用传感器网络感知世界
- 即日起珠海可用微信乘公交,腾讯乘车码助力智慧城市建设
- 利用mk-table-checksum监测Mysql主从数据一致性操作记录
- mysql主从同步(4)-Slave延迟状态监控
- 浏览器窗口尺寸改变时的图片自动重新定位
- Mongodb主从复制/ 副本集/分片集群介绍
- Paul-Adrien Menez:互联网与抵制食物浪费的故事
- DRBD详细解说及配置过程记录
- Servant:基于Web的IIS管理工具
- Web前端知识体系精简——CSS 篇
- 几种异步操作方式
- 今天的面试小记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python如何调用java类
- Python pytesseract验证码识别库用法解析
- python 读txt文件,按‘,’分割每行数据操作
- PHP利用递归函数实现无限级分类的方法
- 详解关于php的xdebug配置(编辑器vscode)
- PHP应用跨时区功能的实现方法
- PHP实现的数据对象映射模式详解
- PDO::beginTransaction讲解
- PHP匿名函数(闭包函数)详解
- PDO::getAttribute讲解
- PHP压缩图片功能的介绍
- PHP+RabbitMQ实现消息队列的完整代码
- Pytorch 高效使用GPU的操作
- PDO::commit讲解
- Python3实现建造者模式的示例代码