❝观前提醒： 许多「长的代码片段， 都贴图展示」了， 掘金的「文章字数超限了」，没办法了😢
❞
State
1.什么是单一状态树?
❝❞
- State 之所以叫「单一状态树」, 就是因为用一个对象包含了全部层级状态
- 在
Vue组件中如果想要获取Vuex的状态, 都需要从state中获取
2.state 单一状态树特点
❝state的改变完全由mutations控制
我们也没必要任何项目都使用vuex, 对于中大型复杂项目而言, 需要共享的状态很多时, 使用vuex才是最佳的选择
❞
3.mapState
❝在
❞Vuex 2中新增了一个mapState辅助函数，当一个组件需要获取多个状态时，可以直接在函数中声明。
当计算属性与state子节点相同时，可以这么写：
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
Getters
1.Getters基本使用
❝当
state中的某些状态在各个组件中都被频繁进行计算、筛选、过滤, 如果在每个组件中都操作一次, 将会变得非常繁琐因此便有了
❞getters来帮助我们解决这个问题, 你也可以把它看Vuex的计算属性
2.Getters作为参数和传递参数
❝
getters接收两个参数,state与getters什么时候需要形参
❞getters: 当你需要使用在getters对象中获取已定义函数的返回值时使用
传递参数
getters默认是不能让用户传递参数的, 那么可以让getters本身「返回另一个函数」, 让用户调用时传递参数- 比如上面的案例中, 我们希望: 根据用户传递的年龄来进行过滤数组
3.mapGetters 辅助函数
❝❞
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
如果你想将一个 getter 属性另取一个名字,使用对象形式:
Mutations
1.Mutation状态更新
Vuex的 store 状态更新的唯一方式: 「提交
Mutation」Mutation主要包括两部分
- 「字符串的事件类型 (type)」 也就是事件名/函数名
- 「一个回调函数 (handler)」, 该回调函数第一个参数就是
state
Mutation不能直接调用, 需要调用相应的stotre.commit方法
$store.commit('increment')
2.Mutation传递参数
引入: 当我们通过
mutation改变state时, 希望可以根据mutation传递的参数来动态改变statemutation参数:mutation接受两个参数state和payload(载荷)- 通过执行回调函数修改
state状态, 可以向$store.commit传入额外的参数payload - ``payload
可以是一个对象, 这样包含多个字段并且记录的mutation`更容易读
- 通过执行回调函数修改
3.Mutation提交方式
- 上面通过
commit进行提交是一种普通方式 - 提交
mutation的另一种方式是直接使用包含type属性的对象
mutation中处理方式是将整个commit对象作为payload使用
4.Mutation响应规则
Vuex中store是「响应式」的, 当 state 状态改变时, Vue组件会自动更新
这也意味着 Vuex中的mutation也需要与使用 Vue 对应的规则
提前在
stotre中初始化所需的属性当给
state对象添加新属性时, 你应用使用:- 方式一:
Vue.set(obj, 'newProp', 123) - 方式二: 用新对象替换老对象
- 方式一:
5.Mutation 常量替换事件类型
- 为什么使用定义常量替换 mutation 事件类型
- 当 Vuex 需要更新的状态越来越多, 那就意味着 mutation 方法越来越多
- 方法过多, 需要使用者大量的记住这些方法, 甚至多个文件来回切换, 查看方法名
- 如何避免上述问题?
- 在各种Flux实现中, 一种很常见的方案就是使用常量替代Mutation事件的类型
- 同时将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然
6.Mutation 同步函数
Vuex要求我们 Mutation 中的方法必须是同步操作
- 主要原因是我们使用 devtools 时, 可以devtools可以帮助我们捕捉mutation的快照
- 如果 mutation 中是异步操作, devtools 将不能跟踪这个操作, 将会导致视图数据 和 devtools 记录不一致
在 Mutation 的函数中执行异步操作 => devtools 数据会跟踪不到 Mutation 异步操作行为
解决方案: 使用 Action 来执行异步操作, 提交到 mutation
Actions
1.Action基本定义
Action 类似于 mutation, 不同于:
- Action 提交的是 mutation , 而不是直接更改状态
- Action 可以包含任意异步操作
context参数 是和 store对象具有相同方法和属性的对象, 通过 context 来提交事件
2.Action的分发
- 在Vue组件中, 使用
dispatch来调用Action中的方法 - 同样的, 也是支持传递payload
3.Action返回Promise
- 如何获取这个异步操作成功的状态?
- 在 Action 中, 将异步操作封装在Promise中, 成功或失败改变对应的状态
Modules
1.认识Module
Vuex由于使用单一状态树, 应用所有状态都会集中到一个较大的对象当应用变得非常复杂时，store 对象就有可能变得相当臃肿
为了解决以上问题, Vuex 允许我们将 store 分隔成模块 (module), 每个模块拥有自己的 state、mutation、action、getter
2.模块局部状态
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象
同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：
对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：
