从Store 开始:
Store 就是仓库,我们前面提到的 state 就储存在Store 中 ,同事提交动作,修改装袋的犯法也都由store 提供和管理
核心概念:
-state -getters -mutation -actions
-state
储存应用状态数据的 对象 。state 的值可以使一个对象,也可以是一个返回对象的函数,类似 vue 中组件的 data,使用函数的方式返回对象可以避免对象引用导致的副作用问题
问题: state 的更新不会更新视图
解决方法: 使用 cumputed
store 配置
如果每个组件在使用 store 的时候都 import 会比较繁琐,这个时候,我们通过 vuex 提供的 store 选项把 store 对象注入到 vue 的原型上
使用辅助函数 mapState
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余,为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键,通常我们把 store的 state 通过 mapState 函数映射到组件 computed 上
使用扩展运算符组合
通过对象扩展运算符,可以把 mapState 返回的 state 属性与组件已有计算属性进行融合
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 中的函数不要直接调用
提交:
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
提交
action 任务需要 通过 第三怕他V环方法 来 提交(派发),与 commit 类似
dispatch 方法有 返回值,且一定返回一个 promise对象
cation函数:
cation 中的函数 执行的时候,也要接受二个参数
第一个参数 state 对象
第二个参数 dispatch提交的 palyoad
使用辅助函数 ,apActions
与mapMutations 函数类似,把组件的 methods 映射为 store 的 zctions 的 dispatch 调用