Vuex简介
- 什么是vuex:
vuex是一个把多个组件通用的数据 我们把它拿出来,然后放到一个store里面管理,在需要使用的组件里面,我们可以拿出来使用
- 关于store
store基本上就是一个容器,包含着你的应用中大部分的状态(state)
- 关于state
state就是我们项目全局通用的data的属性,并且这些属性是响应式的,也就是当属性发生改变时,state也会回动态响应的
- 关于getter
getter可以使我们从需要从store中的state中派生出一些状态,例如对列表进行过滤并计数;
Vuex允许我们在store容器中定义getter(可以理解为store的计算属性),就像计算属性一样;
getter的返回值会根据它的依赖被缓存起来,且只有当他的依赖值发生了改变才会被重新计算;
- 关于Mutation
更改store中的state状态的 唯一方法 就是提交mutation。Vuex中的mutation非常类似于事件,每个mutation都有一个字符串的类型事件(type)和一个回调函数(handle),这个海带哦函数就是我们实际进行状态更改的地方,并且会受state作为第一个参数;
你可以联想我们网页绑定事件机制:类型事件click和回调函数handle,是不是方便理解了呢
- 关于Action
Action 类似于mutation 区别
1. action提交的是mutation,而不是直接修改store中state,mutation才是唯一能改状态的
2. 可以包含任意异步操作
or
1. Action 提交的是 mutation,而不是直接变更状态。
2. Action 可以包含任意异步操作(mutation里边是不能包含异步操作的,因为无法追踪状态改变)。
store.dispatch负责分发
- 关于module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store对象就有可能变得非常臃肿,
Use the steps Description
- 安装
npm install vuex --save
- 1
- 创建仓库
- 使用:
this.$store.state.变量名 就可以获取 与赋值