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中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
详解vue组件之间的通信
Aug 30 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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实现mysql数据库备份类
2008/03/20 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
node.js的事件机制
2017/02/08 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
Python threading多线程编程实例
2014/09/18 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
公司员工的自我评价范例
2013/11/01 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
邮政员工辞职信
2014/01/16 职场文书
国家助学金获奖感言
2014/01/31 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
见习报告格式要求
2014/11/04 职场文书
申报优秀教师材料
2014/12/16 职场文书
家长高考寄语
2015/02/27 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
python画条形图的具体代码
2022/04/20 Python