Vuex的API文档说明详解


Posted in Javascript onFebruary 05, 2020

概述

import Vuex from 'vuex'

const store = new Vuex.Store({ ...options })

构造器选项

state

类型: Object

Vuex store 实例的根 state 对象

mutations

类型: { [type: string]: Function }

在 store 上注册 mutation,处理函数总是接受 state 作为第一个参数(如果定义在模块中,则为模块的局部状态),payload 作为第二个参数(可选)

actions

类型: { [type: string]: Function }

在 store 上注册 action。处理函数接受一个 context 对象,包含以下属性:

{
 state,   // 等同于 store.state, 若在模块中则为局部状态
 rootState, // 等同于 store.state, 只存在于模块中
 commit,  // 等同于 store.commit
 dispatch, // 等同于 store.dispatch
 getters  // 等同于 store.getters
}

getters

类型: { [key: string]: Function }

在 store 上注册 getter,getter 方法接受以下参数:

 state,     // 如果在模块中定义则为模块的局部状态

 getters,   // 等同于 store.getters

当定义在一个模块里时会特别一些

  state,       // 如果在模块中定义则为模块的局部状态

  getters,     // 等同于 store.getters

  rootState    // 等同于 store.state

  rootGetters  // 所有 getters

注册的 getter 暴露为 store.getters

modules

类型: Object

包含了子模块的对象,会被合并到 store

{
 key: {
  state,
  namespaced?,
  mutations,
  actions?,
  getters?,
  modules?
 },
 ...
}

与根模块的选项一样,每个模块也包含 state 和 mutations 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数,而不是根状态,并且模块 action 的 context.state 同样指向局部状态

plugins

类型: Array<Function>

一个数组,包含应用在 store 上的插件方法。这些插件直接接收 store 作为唯一参数,可以监听 mutation(用于外部地数据持久化、记录或调试)或者提交 mutation (用于内部数据,例如 websocket 或 某些观察者)

strict

类型: Boolean

默认值: false

使 Vuex store 进入严格模式,在严格模式下,任何 mutation 处理函数以外修改 Vuex state 都会抛出错误

实例属性

state

类型: Object

根状态,只读

getters

类型: Object

暴露出注册的 getter,只读 

实例方法

commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)

提交 mutation。options 里可以有 root: true,它允许在命名空间模块里提交根的 mutation

dispatch(type: string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)

分发 action。options 里可以有 root: true,它允许在命名空间模块里分发根的 action。返回一个解析所有被触发的 action 处理器的 Promise

replaceState(state: Object)

替换 store 的根状态,仅用状态合并或时光旅行调试

watch(getter: Function, cb: Function, options?: Object)

响应式地监测一个 getter 方法的返回值,当值改变时调用回调函数。getter 接收 store 的状态作为唯一参数。接收一个可选的对象参数表示 Vue 的 vm.$watch 方法的参数。

要停止监测,直接调用返回的处理函数

subscribe(handler: Function)

注册监听 store 的 mutation。handler 会在每个 mutation 完成后调用,接收 mutation 和经过 mutation 后的状态作为参数

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

通常用于插件

registerModule(path: string | Array<string>, module: Module)

注册一个动态模块

unregisterModule(path: string | Array<string>)

卸载一个动态模块

hotUpdate(newOptions: Object)

热替换新的 action 和 mutation

辅助函数

mapState(namespace?: string, map: Array<string> | Object): Object

为组件创建计算属性以返回 Vuex store 中的状态。第一个参数是可选的,可以是一个命名空间字符串

mapGetters(namespace?: string, map: Array<string> | Object): Object

为组件创建计算属性以返回 getter 的返回值。第一个参数是可选的,可以是一个命名空间字符串

mapActions(namespace?: string, map: Array<string> | Object): Object

创建组件方法分发 action。第一个参数是可选的,可以是一个命名空间字符串

mapMutations(namespace?: string, map: Array<string> | Object): Object

创建组件方法提交 mutation。第一个参数是可选的,可以是一个命名空间字符串

createNamespacedHelpers(namespace: string): Object

更多关于VUEX方面的相关知识请点击下面的相关链接

Javascript 相关文章推荐
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
JS解析XML实例分析
Jan 30 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
vue设置默认首页的操作
Aug 12 Javascript
如何实现iframe父子传参通信
Feb 05 #Javascript
JavaScript对象原型链原理详解
Feb 05 #Javascript
基于Vue的侧边目录组件的实现
Feb 05 #Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 #Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
JS代码优化的8点建议
Feb 04 #Javascript
9种方法优化jQuery代码详解
Feb 04 #jQuery
You might like
mysql建立外键
2006/11/25 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
js 分栏效果实现代码
2009/08/29 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
django DRF图片路径问题的解决方法
2018/09/10 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
python3 使用traceback定位异常实例
2020/03/09 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
四年级语文教学反思
2014/02/05 职场文书
优秀经理获奖感言
2014/03/04 职场文书
科学发展观标语
2014/10/08 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL