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 指南/入门基础
Nov 30 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
如何实现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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
js实现密码强度检验
2017/01/15 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
vue实现拖拽效果
2019/12/23 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python中尾递归用法实例详解
2015/04/28 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python实现图书借阅系统
2019/02/20 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
对python中return与yield的区别详解
2020/03/12 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
2014年法院个人工作总结
2014/12/17 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript
Spring中bean集合注入的方法详解
2022/07/07 Java/Android
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android