modules使用详解

首先在唯一的store对象里注册modules

modules: {a:moduleA
}

然后创建modules

const moduleA = {state: {name: 'A'},mutations: {updateName(state) {state.name = 'qwer'}},getters: {fullName(state) {return state.name + '111'},fullName2(state, getters) {return getters.fullName + '222'},/*第三个参数是唯一的store的state内容*/fullName3(state, getters, rootState,rootGetters) {return getters.fullName2 + rootState.counter + rootGetters.powerCounter}},actions: {//这里的context上下文只会取提交自己的mutations，不会去找root的aUpdateName(context) {setTimeout(() => {context.commit('updateName')}, 1000)}}
}

<h2>===========modulesA里的内容=============</h2>
<h2>{{$store.state.a.name}}</h2>
<button @click="updateName">修改名字</button>
<h2>{{$store.getters.fullName}}</h2>
<h2>{{$store.getters.fullName2}}</h2>
<h2>{{$store.getters.fullName3}}</h2>
<button @click="asyncUpdateName">异步修改名字</button>

updateName() {this.$store.commit('updateName')
},asyncUpdateName() {this.$store.dispatch('aUpdateName')
}

首先modulesA里的state可以通过可以通过自己的别名a来调用。其实a的state直接被添加到store的state里.

注意modules里的方法名和store里的方法名不要重复。modules里的方法调用和store里的相同，首先会在store里找同名方法，找不到就去modules里找

modules里的getters不仅可以将自己作为参数传递，还可以增加一个rootState参数，这个参数可以直接调用store的state,还可以有第三个参数rootGetters，可以调用store的getters

所以不要有命名冲突。还有一个不同点。

就是modules里的context和store里的不同，他不会去store里找同名方法，他自会在自己的范围内去commit方法名。

同时这个context是一个对象里边不仅有modules里的state/getters,还有rootSatte/rootGetters

modules使用详解相关推荐

linux make modules 命令详解
一.Linux 内核模块编译的本质 make modules 命令的执行路径只能是内核源码顶层目录,执行结果是:读取内核源码顶层目录中的 Makefile 文件,找到里面定义的 modules 目标. ...
css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...
Linux中/proc目录下文件详解 /proc/devices文件 /proc/modules文件
http://blog.chinaunix.net/uid-10449864-id-2956854.html 原来对linux系统中的/proc目录不是很了解,只知道可以查看cpu,内存等相关的信息, ...
Assembly与Modules详解
C#Assembly详解 (可参考https://blog.51cto.com/lsieun/1753506 <CLR Via C#>使用CSC.exe将module组合成assembl ...
Linux中/proc目录下文件详解
Linux中/proc目录下文件详解(一) 声明:可以自由转载本文,但请务必保留本文的完整性. 作者:张子坚 email:zhangzijian@163.com 说明:本文所涉及示例均在fedora ...
elasticsearch-.yml（中文配置详解）
此elasticsearch-.yml配置文件,是在$ES_HOME/config/下 elasticsearch-.yml(中文配置详解) # ======================== El ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
php theme_path,PHP_Yii2主题(Theme)用法详解，本文实例讲述了Yii2主题(Theme) - phpStudy
Yii2主题(Theme)用法详解本文实例讲述了Yii2主题(Theme)用法.分享给大家供大家参考,具体如下: 首先看看主要的配置方式: 'components' => [ 'view' = ...
Python中的__name__和__main__含义详解
背景在写Python代码和看Python代码时,我们常常可以看到这样的代码: ? 1 2 3 4 5 def main(): ...... if __name__ == "__ma ...

modules使用详解

modules使用详解

首先在唯一的store对象里注册modules

然后创建modules

modules使用详解相关推荐

最新文章

热门文章