详解vuex中mutation/action的传参方式
网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了详解vuex中mutation/action的传参方式，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧
前言
在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。
是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下
//vuex中的state
const state = {
count: 0
}
export default state;
mutation传参
朴实无华的方式
mutation.js
//vuex中的mutation
const mutations = {
increment: (state,n) => {
//n是从组件中传来的参数
state.count += n;
}
}
export default mutations;
vue组件中（省去其他代码）
methods: {
add(){
//传参
this.$store.mit('increment',5);
}
}
对象风格提交参数
mutation.js
//vuex中的mutation
const mutations = {
decrementa: (state,payload) => {
state.count -= payload.amount;
}
}
export default mutations;
vue组件
methods: {
reducea(){
//对象风格传参
this.$store.mit({
type: 'decrementa',
amount: 5
});
},
}
action传参
朴实无华
action.js
/vuex中的action
const actions = {
increment(context,args){
context.mit('increment',args);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
increment: (state,n) => {
state.count += n;
}
}
export default mutations;
vue组件
methods: {
adda(){
//触发action
this.$store.dispatch('increment',5);
}
}
对象风格
action.js
//vuex中的action
const actions = {
decrementa(context,payload){
context.mit('decrementa',payload);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
decrementa: (state,payload) => {
state.count -= payload.amount;
}
}
export default mutations;
vue组件
methods: {
reduceb(){
this.$store.dispatch({
type: 'decrementa',
amount: 5
});
}
}
action的异步操作
突然就想总结一下action的异步操作。。。。
返回promise
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise给触发的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.mit('multiplication',payload);
resolve("async over");
},2000);
});
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
methods: {
asyncMul(){
let amount = {
type: 'asyncMul',
amount: 5
}
this.$store.dispatch(amount).then((result) => {
console.log(result);
});
}
}
在另外一个 action 中组合action
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise给触发的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.mit('multiplication',payload);
resolve("async over");
},2000);
});
},
actiona({dispatch,mit},payload){
return dispatch('asyncMul',payload).then(() => {
mit('multiplication',payload);
return "async over";
})
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
methods: {
actiona(){
let amount = {
type: 'actiona',
amount: 5
}
this.$store.dispatch(amount).then((result) => {
console.log(result);
});
}
}
使用async函数
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise给触发的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.mit('multiplication',payload);
resolve("async over");
},2000);
});
},
async actionb({dispatch,mit},payload){
await dispatch('asyncMul',payload);
mit('multiplication',payload);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue组件
methods: {
actionb(){
let amount = {
type: 'actionb',
amount: 5
}
this.$store.dispatch(amount).then(() => {
...
});
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例，vb做数据库
- tiobe世界编程语言排行榜，全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训，编程基础知识培训
- flash游戏编程基础教程，flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思，图形编程是什么意思
- c语言编程软件下载，c语言编程软件在哪下载
- java编程软件下载，java编程下载手机版
- ug编程培训学校，ug编程培训教程