在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 ...
随机推荐
- sql server中如何修改视图中的数据?
sql server中如何修改视图中的数据? 我做个测试,视图的数据有标记字段时,如果是这种方式(0 as FlagState),是无法修改的 --创建视图语句 --- create view V_E ...
- one list to muti list
List<Integer> intList = Lists.newArrayList(1, 2, 3, 4, 5, 6, 7, 8); List<List<Integer> ...
- django数据库的表已迁移的不能重新迁移的解决办法
django.db.utils.InternalError: (1050, "Table 'tb_content' already exists") mysql数据库在迁移时数据库 ...
- tomcat启动正常,但是访问项目时,404. Eclipse没有正确部署工程项目
解决方案URL:http://blog.csdn.net/lynn_wgr/article/details/7751228
- abap将内表数据导出为excel文件
一个不错的方案: WHEN 'EXPORT'. "导出数据 DATA : GT_TEMP TYPE TABLE OF TY_ITEM WITH HEADER LINE. LOOP AT GT ...
- S2T40,第五章
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 星星闪烁+多边形移动 canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- How to convert Word table into Excel using OpenXML
原文出处:https://code.msdn.microsoft.com/How-to-convert-Word-table-0cb4c9c3 class Program { static void ...
- 生命周期--JSF
生命周期处理两种请求:初始请求和回发.当用户首次请求页面时,他或她正在首次请求该页面.当用户执行回发时,由于执行初始请求,他或她会提交以前加载到浏览器中的页面中包含的表单.当生命周期处理初始请求时,它 ...
- MySQL 必知必会学习笔记(常用命令二)
CREATE TABLE students(student_id INT UNSIGNED, name VARCHAR(30), sex CHAR(1), birth DATE, PRIMARY KE ...