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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
详解jenkins自动化部署vue
May 14 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
vue webpack重写cookie路径的方法
Jul 10 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
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP 无限级分类
2017/05/04 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Python 实现链表实例代码
2017/04/07 Python
python书籍信息爬虫实例
2018/03/19 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python简单实现AES加密和解密
2019/03/28 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python适合做数据挖掘吗
2020/06/16 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
大学生职业生涯规划书
2014/03/14 职场文书
职称评定自我鉴定
2014/03/18 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
新兵入伍决心书
2015/09/22 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书