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 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
小程序实现分类页
2019/07/12 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python input函数使用实例解析
2019/11/22 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python实现括号匹配方法详解
2020/02/10 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
Python面试题集
2012/03/08 面试题
教育科学研究生自荐信
2013/10/09 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
优秀学生事迹材料
2014/02/08 职场文书
奠基仪式主持词
2014/03/20 职场文书
开业主持词
2014/03/21 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
文书工作总结(范文)
2019/07/11 职场文书