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跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
JS实现图片切换特效
Dec 23 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 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
php木马攻击防御之道
2008/03/24 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php短址转换实现方法
2015/02/25 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
xmlHTTP实例
2006/10/24 Javascript
js判断浏览器的比较全的代码
2007/02/13 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
python实现的简单文本类游戏实例
2015/04/28 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python爬虫基础知识点整理
2020/06/02 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python设置表格边框的具体方法
2020/07/17 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
写给老婆的检讨书
2014/02/21 职场文书
读书演讲主持词
2014/03/18 职场文书
年终晚会主持词
2014/03/25 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
话题作文之诚信
2019/11/28 职场文书
python获取字符串中的email
2022/03/31 Python