首页 > 其他分享> 文章详细

Vuex——总结篇（API总结）

2021-01-10 17:57:04 阅读：257 来源： 互联网

标签：总结 state API mutation action Vuex options store

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

Store 构建选项

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

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

实例属性和方法

实例属性

state：store.state用于获取根状态，它是只读的，不可以通过这种方式修改
getters：store.getters用于获取 store 对象中的getters，它也是只读的

实例方法

commit：用于提交 mutation函数。下面两种使用方法中，options 参数里可以有 root: true，它允许在命名空间模块里提交根的 mutation。

commit(type, params, options)

commit(Object, options)

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

dispatch(type, params, options)

dispatch(Object, options):

replaceState：替换 store 的根状态，仅用状态合并或时光旅行调试。
watch( fn, callback, options)：响应式地侦听 fn 的返回值，当值改变时调用回调函数。fn 接收 store 的state作为第一个参数，其 getter作为第二个参数。最后接收一个可选的对象参数表示 Vue 的 vm.$watch 方法的参数。
subscribe(handler: Function, options?: Object)：handler 会在每个 mutation 完成后调用，接收 mutation 和经过 mutation后的状态作为参数：

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

subscribeAction(handler: Function, options?: Object): Function：handler 会在每个 action 分发的时候调用并接收 action 描述和当前的 store 的 state 这两个参数：

store.subscribeAction((action, state) => {
  console.log(action.type)
  console.log(action.payload)
})

registerModule(path: string | Array<string>, module: Module, options?: Object)：注册一个动态模块，第一个参数表示模块名称，可以嵌套声明，第二参数是模块具体的信息，第三个参是配置项，可以包含 preserveState: true 以允许保留之前的 state。
unregisterModule(path: string | Array<string>)：卸载一个动态模块
hasModule(path: string | Array<string>)：检查该模块的名字是否已经被注册

辅助函数

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

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

标签：总结,state,API,mutation,action,Vuex,options,store
来源： https://blog.csdn.net/qq_45040919/article/details/112430901