在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 ...
随机推荐
- linux图像界面连接-xdm
有两种方法可以激活 --:修改/etc/gdm/custom.conf文件在 [security]字段下增加AllowRemoteRoot=true [xdmcp]字段下增加Enable=true - ...
- 微信小程序电商实战(-)商城首页
首先在app.json中配置页面和底部tabbar { "pages":[ "pages/index/index", "pages/kind/kind ...
- Win10系列:C#应用控件进阶8
LineGeometry LineGeometry控件通过指定直线的起点和终点来定义线.LineGeometry对象无法进行自我绘制,因此同样需要使用 Path元素来辅助呈现.LineGeometry ...
- textarea右下角黑点
先记录问题及解决方法,原因后续深入了解 在布局中,用到了textarea 输入框,在Android手机上却显示右下角有一个黑点,检查代码无误,代码没有多余的点符号. 解决:在textarea 中添加 ...
- Rhino学习教程——1.1
在Rhino的官网下载好Rhino5.0版本后(Rhino官网会提供下载方式,官网是http://www.xuexiniu.com),双击桌面快捷键,就会出现Rhino的界面(我已经自定义过界面了). ...
- 本人亲身讲解本科期间学习Linux系统过程
学习Linux也有一段时间了,回首这段时光,既迷茫过也既充实过.当时刚接触Linux是在大学,身边的同学都在学习,我想我也该学点一技之长了.我本科并不是计算机专业的,关于软件的课程也就只有C++,所以 ...
- MongoDB的数据库导出和导入以及备份
数据库的导出 mongoexport -d 数据库名 -c 集合名 -o 导出文件的保存地址及保存文件名.json --type json 数据库的导入 mongoimport -d 数据库名 -c ...
- Django知识总结(二)
拾 ● 模型(M) 一 ● ORM(对象关系映射, Object Relational Mapping) 类----一张表 类的实例对象----表中的一条记录 映射关系 ①python的类名对应的SQ ...
- erlang并发编程
1.erlang中创建进程(非操作系统线程,比其要轻量很多)非常方便,运用spawn函数即可 spawn(Fun) -> pid() spawn(Node, Fun) -> pid() s ...
- 编译libcurl支持https协议
编译与安装参考:http://www.cnblogs.com/openiris/p/3812443.html 注意事项:先下载安装完nasm和perl再打开控制台(需要将nasm安装路径添加到Path ...