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.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
如何实现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
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
微信小程序实现跑马灯效果
2020/10/21 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python smallseg分词用法实例分析
2015/05/28 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python模块之paramiko实例代码
2018/01/31 Python
python DataFrame 取差集实例
2019/01/30 Python
Python字符串对象实现原理详解
2019/07/01 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
求职简历推荐信范文
2013/12/02 职场文书
推广普通话演讲稿
2014/05/23 职场文书
重阳节标语大全
2014/10/07 职场文书