在之前几篇,我们重点了解了Vuex 的一些用法,在其中我们用到很多属性和方法,那么我们在这篇去总结一下 Vuex 的 API

Store 构建选项

Vuex 中最主要的就是 Store 对象,我们具体了解一下 Store 对象的构建选项:

  1. state:这个是用于存放 Vuex 的状态,也就是数据;
  2. mutations:这个用于定义数据修改函数,Vuex 状态的唯一办法;
  3. actions:这个用于定义数据修改函数,但不直接修改,需要通过mutations修改
  4. getters:这个类似于计算属性,它可以接收两个参数——state和getters
  5. modules:用于定义子模块,子模块的对象可以包含:state, namespaced,mutations,actions,getters modules等选项
  6. plugins:一个数组,包含应用在 store 上的插件方法。
  7. strict:使 Vuex store 进入严格模式,在严格模式下,任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。
  8. devtools:为某个特定的 Vuex 实例打开或关闭 devtools。对于传入 false 的实例来说 Vuex store 不会订阅到 devtools 插件。可用于一个页面中有多个 store 的情况。

实例属性和方法

实例属性
  1. statestore.state用于获取根状态,它是只读的,不可以通过这种方式修改
  2. gettersstore.getters用于获取 store 对象中的getters,它也是只读的
实例方法
  1. commit:用于提交 mutation函数。下面两种使用方法中,options 参数里可以有 root: true,它允许在命名空间模块里提交根的 mutation
commit(type, params, options)

commit(Object, options)
  1. dispatch:用于提交action函数。下面两种使用方法中,options 参数里可以有 root: true,它允许在命名空间模块里提交根的 action。都返回一个解析所有被触发的 action 处理器的 Promise。
dispatch(type, params, options)

dispatch(Object, options):
  1. replaceState:替换 store 的根状态,仅用状态合并或时光旅行调试。
  2. watch( fn, callback, options):响应式地侦听 fn 的返回值,当值改变时调用回调函数。fn 接收 storestate作为第一个参数,其 getter作为第二个参数。最后接收一个可选的对象参数表示 Vue 的 vm.$watch 方法的参数。
  3. subscribe(handler: Function, options?: Object)handler 会在每个 mutation 完成后调用,接收 mutation 和经过 mutation后的状态作为参数:
store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})
  1. subscribeAction(handler: Function, options?: Object): Functionhandler 会在每个 action 分发的时候调用并接收 action 描述和当前的 store 的 state 这两个参数:
store.subscribeAction((action, state) => {
  console.log(action.type)
  console.log(action.payload)
})
  1. registerModule(path: string | Array<string>, module: Module, options?: Object):注册一个动态模块,第一个参数表示模块名称,可以嵌套声明,第二参数是模块具体的信息,第三个参是配置项,可以包含 preserveState: true 以允许保留之前的 state。
  2. unregisterModule(path: string | Array<string>):卸载一个动态模块
  3. hasModule(path: string | Array<string>):检查该模块的名字是否已经被注册

辅助函数

Vuex 实例中有几个辅助函数,用于组件中辅助绑定Vuex中的State、Getters、Actions和Mutations

  1. mapState:为组件创建计算属性以返回Vuex store 中的状态。第一个参数是可选的,可以是一个命名空间字符串,第二个参数可以是数组或对象或函数,用于绑定具体的 Vuex store
  2. mapGetters:为组件创建计算属性以返回 getter 的返回值。其参数同mapState
  3. mapActions:创建组件方法分发action
  4. mapMutations:创建组件方法提交 mutation
  5. createNamespacedHelpers:创建基于命名空间的组件绑定辅助函数。其返回一个包含 mapState、mapGetters、mapActions 和 mapMutations 的对象。它们都已经绑定在了给定的命名空间上。
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐