2020-10-23 VUEX

从Store 开始：
Store 就是仓库，我们前面提到的 state 就储存在Store 中 ，同事提交动作，修改装袋的犯法也都由store 提供和管理

image.png

核心概念：
-state -getters -mutation -actions

-state
储存应用状态数据的 对象 。state 的值可以使一个对象，也可以是一个返回对象的函数，类似 vue 中组件的 data，使用函数的方式返回对象可以避免对象引用导致的副作用问题

image.png

问题： state 的更新不会更新视图
解决方法： 使用 cumputed

image.png

store 配置
如果每个组件在使用 store 的时候都 import 会比较繁琐，这个时候，我们通过 vuex 提供的 store 选项把 store 对象注入到 vue 的原型上

image.png

使用辅助函数 mapState
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余，为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键，通常我们把 store的 state 通过 mapState 函数映射到组件 computed 上

image.png

使用扩展运算符组合
通过对象扩展运算符，可以把 mapState 返回的 state 属性与组件已有计算属性进行融合

image.png

9、getters

有时候我们需要从 store 中的 state 中派生出一些状态，类似组件的 data 与 computed，store 也提供了一个 getters 对象来处理派生数据

getters 函数

与组件属性一样，我们是通过定义一个函数的形式来返回派生数据的，getters 函数接受两个参数

• 第一个参数：state 对象
• 第二个参数：getters 对象

通过属性访问

同样的，与组件计算属性一样，默认是通过属性的方式去访问 getters 中的数据的，这种方式与组件的计算属性一样，也是会缓存结果的

通过方法访问

我们还可以通过闭包函数的形式返回一个函数，来实现给 getters 函数传参，需要注意的是这种方式不支持结果缓存

使用辅助函数 mapGetters

与 mapState 函数类似，通常映射到组件的 computed 上

mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation（类似 redux 中的 action + reducer），Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

mutation 中的函数不要直接调用

提交：

image.png

type
要提交的 mutation回调函数名称，type为固定的key

palyoad
载荷： 提交的额外数据，任意格式
mutation
mutation 中的函数被 commit 执行的时候，接受二个参数
第一个参数 state 对象
第二个参数 commit 提交的 palyoad
在 mutation 函数中，我们就可以通过 state 对象 进行状态数据的修改
使用辅助函数 mapMutation
mapMutation 函数的使用 与 mapState 和 mao Getters 类似，但是其一般是吧 组件 methods 映射为 store 的 mutations 的 commit 调用
mution 函数 必须是同步的 commite 方法没有 返回值

actions
action 中和函数一 mutation 中的函数 类似， 但是他组套同来进行异步认为的处理没然后 通过提交 mutation 来修改 state

提交

image.png

action 任务需要 通过 第三怕他V环方法 来 提交（派发），与 commit 类似
dispatch 方法有 返回值，且一定返回一个 promise对象

cation函数：
cation 中的函数 执行的时候，也要接受二个参数
第一个参数 state 对象
第二个参数 dispatch提交的 palyoad

使用辅助函数 ，apActions
与mapMutations 函数类似，把组件的 methods 映射为 store 的 zctions 的 dispatch 调用