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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
js实现五星评价功能
2017/03/08 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
python构建自定义回调函数详解
2017/06/20 Python
python 实现登录网页的操作方法
2018/05/11 Python
详解python分布式进程
2018/10/08 Python
python将txt文件读取为字典的示例
2018/12/22 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python十进制转二进制的详解
2020/02/07 Python
Keras搭建自编码器操作
2020/07/03 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
微笑服务演讲稿
2014/05/13 职场文书
模范班主任事迹材料
2014/12/17 职场文书
搞笑老公保证书
2015/02/26 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
党组织结对共建协议书
2016/03/23 职场文书
python获取对象信息的实例详解
2021/07/07 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
Vue router配置与使用分析讲解
2022/12/24 Vue.js