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 parseInt 大改造
Sep 27 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
js实现拖拽效果
Feb 12 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
如何实现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设计模式 Composite (组合模式)
2011/06/26 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
pygame学习笔记(4):声音控制
2015/04/15 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
Python Requests库基本用法示例
2018/08/20 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
班主任寄语大全
2014/04/04 职场文书
服务理念口号
2014/06/11 职场文书
党委班子剖析材料
2014/08/21 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2014年药房工作总结
2014/11/22 职场文书
幼儿学前班评语
2014/12/29 职场文书
邀请函怎么写
2015/01/30 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Java实现学生管理系统(IO版)
2022/02/24 Java/Android