1.vuex的理解:
1.集中管理组件的状态
2.为组件之间通信提供一套标准规则(最佳实践)
vuex参考借鉴flux/Redux
2.如何将vuex引入工程:
1.Vue.use(Vuex)
2.new Vuex.store(){}
3.new Vuex.store(){}:
state(存放全局的属性),mutation(操作改变状态),actions(异步操作,包含多个mutation),getters(计算属性),modules(模块化)
流程:【组件】 -- dispatch--> 【actions】 --- commit -- 【mutations】 ----> 【state】
4. mutations 的意义,为什么在 actions 和 state 之间加了 mutations ?
不要直接改变状态,通过 mutations 改变状态(每一次 mutations 操作都是一个状态的快照,
mutations 改变状态时,给状态创建了 快照(某一个时刻的版本)
注意:操作的 【颗粒度】-------------------西瓜,苹果,李子,芝麻
actions 动作:用户与系统()交互动作(业务操作): 包含多个数据操作(改变状态 mutation)
actions 的颗粒度大于 mutations,
mutations是用来改变状态的,actions除了改变状态,还可以做其他事。
mutations 的意义以及同步异步的区别:
1. 状态改变的快照(多个版本),可追踪撤销。
2.颗粒度小于 actions,数据操作。
3. mutations 操作必须是同步的,
同步是一个操作开始到结束期间,阻塞(卡死) (不能超过 16毫秒/ 60帧)。
注意:mutations 中不要执行网络访问。
actions 是异步的 ,1.commit m1. 2.commit.m2 3.;
如:洗菜,切菜,炒菜 是同步的
同步:( 1 ---》2 ---〉3)
异步: 0 ----> 1, 0 ----> 2, 0 ----> 3 异步(同时执行)
5. 组件中使用 store 中的资源,可以使用一些【辅助函数】:
mapState, mapGetters ---> computed ---> View 上渲染(显示),
不建议在 methods 中访问,能读取值,但是不能修改;怎么改?
---》 用 mutations 改变, 直接调用 mutations, actions
若不使用map
this.$store.commit/dispatch 操作 ;
state|getters 读取值来渲染,推荐 map 获得更加简洁
注意:应用级别指的是多个组件使用的数据