在Vuex使用 以及 dispatch和commit来调用mutations的区别
main.js中
import Vuex from 'vuex'
Vue.use(vuex);
const store = new Vuex.store({
state: {
nickName: "",
cartCount: 0
},
mutations: {
updateUserInfo(state,nickName) {
state.nickName = nickName;
},
updateCartCount(state,cartCount) {
state.cartCount += cartCount;
}
},
actions: {
updateUserInfo(context) {
context.commit("updateUserInfo");
},
updateCartCount(context) {
context.commit("updateCartCount");
}
}
})
new Vue({
el: "#app",
store,
router,
template: '<App/>',
components: {App}
})
组件中:
methods: {
increment(){
this.$store.dispatch("updateUserInfo", 'nick'); //this.$store.commit("increment", 'nick');
},
decrement() {
this.$store.dispatch("updateCartCount", 1); // this.$store.commit("decrement", 1);
}
}
区别:
dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值)
commit:同步操作,写法:this.$store.commit('mutations方法名',值)
在Vuex使用 以及 dispatch和commit来调用mutations的区别的更多相关文章
- vuex中的dispatch和commit
dispatch:含有异步操作,eg:向后台提交数据,写法: this.$store.dispatch('mutations方法名',值) commit:同步操作,写法:this.$store.com ...
- 【转】大型Vuex项目 ,使用module后, 如何调用其他模块的 属性值和方法
Vuex 允许我们把 store 分 module(模块).每一个模块包含各自的状态.mutation.action 和 getter. 那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, ...
- vuex直接修改state 与 用dispatch/commit来修改state的差异
一. 使用vuex修改state时,有两种方式: 1.可以直接使用 this.$store.state.变量 = xxx; 2.this.$store.dispatch(actionType, pay ...
- vuex所有核心概念完整解析State Getters Mutations Actions
vuex是解决vue组件和组件件相互通信而存在的,vue理解起来稍微复杂但一旦看懂择即为好用 安装: npm install --save vuex 引入 import Vuex from 'vuex ...
- vuex知识笔记,及与localStorage和sessionStorage的区别
菜单快捷导航 Vuex是什么东东,有什么应用场景?localStorage和sessionStorage能否替代它? Vuex知识点State.Getter.Mutaion.Action Vuex模块 ...
- vuex应用实例-this.$store.commit()触发
新建文件夹store,store下: action.js const actions = {} export default actions; getter.js const getters = {} ...
- vuex中的this.$store.commit
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...
- vuex action 与mutations 的区别
面试没说清楚.这个太丢人回来整理下: 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步 ...
- iOS 中NSOperationQueue,Grand Central Dispatch , Thread的上下关系和区别
In OS X v10.6 and later, operation queues use the libdispatch library (also known as Grand Central D ...
随机推荐
- goodsSearch初始化选中代码
watch: { selectGoodsList (val) { let list = [] val.forEach(item => { this.goodsList.forEach((tag, ...
- http短连接与长连接简介
1.HTTP协议与TCP/IP协议的关系 HTTP的长连接和短连接本质上是TCP长连接和短连接.HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议.IP协议主要解决网络路由和寻址问题 ...
- 【转载】 [unreal4入门系列之七] UE4中的Actor类和Pawn类
原文地址: http://www.52vr.com/article-558-1.html 现在我们开始进入UE4的代码开发工作.首先,UE4的类框架是非常庞大的,看起来有点让人措手不及.不过正因为UE ...
- Oracle 11g 单实例到单实例OGG同步实施文档-RMAN 初始化
Oracle 11g 单实例到单实例OGG同步实施文档-RMAN 初始化 2018-06-07 13:455170原创GoldenGate 作者: leo 本文链接:https://www.cndba ...
- iptables介绍
iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables. iptables的结构:iptables-->Tables-->Chai ...
- 在servlet中跳转问题
跳转有重定向和转发 1重定向 2转发
- jenkins+svn完整打包并上传到linux服务器上
因为公司用的是svn版本管理工具并且部署在了windows服务器上,所以测试环使用jenkins需要部署两套环境, 一套是在本地windows服务器,jenkins从svn下载代码完成打包并上传到li ...
- web网页错误代码的含义
web网页错误代码的含义 一.1xx 表示临时响应并需要请求者继续进行操作的状态码,例如: 100--继续:101--切换协议 二.2xx 表示服务器成功的处理了请求的状态码,例如: 200--客户端 ...
- Pycharm 远程调试
上传后发现成图片了,很模糊.可以看我在百度盘分享pdf文件. https://pan.baidu.com/s/1bYVcAq40SRFtn8qXCPH6TQ
- spring中基于JDK和CGLIB代理在项目的应用
一.环境与问题 环境 spring boot的版本是1.2.1.RELEASE.JDK版本是1.7 问题 A服务 PeopleService 调用B服务 HelloService ,其中B服务的方 ...