Vuex——总结篇(API总结)
在之前几篇,我们重点了解了Vuex 的一些用法,在其中我们用到很多属性和方法,那么我们在这篇去总结一下 Vuex 的 APIStore 构建选项Vuex 中最主要的就是 Store 对象,我们具体了解一下 Store 对象的构建选项:state:这个是用于存放 Vuex 的状态,也就是数据;mutations:这个用于定义数据修改函数,Vuex 状态的唯一办法;actions:这个用于定义数据修改
·
在之前几篇,我们重点了解了Vuex 的一些用法,在其中我们用到很多属性和方法,那么我们在这篇去总结一下 Vuex 的 API
Store 构建选项
Vuex 中最主要的就是 Store 对象,我们具体了解一下 Store 对象的构建选项:
state
:这个是用于存放 Vuex 的状态,也就是数据;mutations
:这个用于定义数据修改函数,Vuex 状态的唯一办法;actions
:这个用于定义数据修改函数,但不直接修改,需要通过mutations
修改getters
:这个类似于计算属性,它可以接收两个参数——state和gettersmodules
:用于定义子模块,子模块的对象可以包含: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
的对象。它们都已经绑定在了给定的命名空间上。
更多推荐
已为社区贡献2条内容
所有评论(0)