时间:2021-05-25
前言
在vuex中提交 mutation 是更改状态的唯一方法,并且这个过程是同步的,异步逻辑都应该封装到 action 里面。对于mutation/action,有一个常见的操作就是传参,也就是官网上说的“提交载荷”。
这里是关于如何在vue-cli中使用vuex的方法,我们采用将vuex设置分割成不同模块的方法。其中,state模块中配置如下
//vuex中的stateconst state = { count: 0}export default state;mutation传参
朴实无华的方式
mutation.js
//vuex中的mutationconst mutations = { increment: (state,n) => { //n是从组件中传来的参数 state.count += n; }}export default mutations;vue组件中(省去其他代码)
methods: { add(){ //传参 this.$store.commit('increment',5); }}对象风格提交参数
mutation.js
//vuex中的mutationconst mutations = { decrementa: (state,payload) => { state.count -= payload.amount; }}export default mutations;vue组件
methods: { reducea(){ //对象风格传参 this.$store.commit({ type: 'decrementa', amount: 5 }); },}action传参
朴实无华
action.js
/vuex中的actionconst actions = { increment(context,args){ context.commit('increment',args); }}export default actions;mutation.js
//vuex中的mutationconst mutations = { increment: (state,n) => { state.count += n; }}export default mutations;vue组件
methods: { adda(){ //触发action this.$store.dispatch('increment',5); }}对象风格
action.js
//vuex中的actionconst actions = { decrementa(context,payload){ context.commit('decrementa',payload); }}export default actions;mutation.js
//vuex中的mutationconst 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中的actionconst actions = { asyncMul(context,payload){ //返回promise给触发的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit('multiplication',payload); resolve("async over"); },2000); }); }}export default actions;mutation.js
//vuex中的mutationconst 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中的actionconst actions = { asyncMul(context,payload){ //返回promise给触发的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit('multiplication',payload); resolve("async over"); },2000); }); }, actiona({dispatch,commit},payload){ return dispatch('asyncMul',payload).then(() => { commit('multiplication',payload); return "async over"; }) }}export default actions;mutation.js
//vuex中的mutationconst 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中的actionconst actions = { asyncMul(context,payload){ //返回promise给触发的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit('multiplication',payload); resolve("async over"); },2000); }); }, async actionb({dispatch,commit},payload){ await dispatch('asyncMul',payload); commit('multiplication',payload); }}export default actions;mutation.js
//vuex中的mutationconst 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(() => { ... }); }}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
首先回顾下vuex,官网图如下Vuex的store中的状态的唯一方法是提交mutation(mutation类似于事件且必须是同步函数)action提交的是mu
Action类似于mutation,不同在于:Action提交的是mutation,而不是直接变更状态.Action是异步的,mutation是同步的。沿用vu
vue在做大型项目时,会用到多状态管理,vuex允许我们将store分割成多个模块,每个模块内都有自己的state、mutation、action、getter
更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件:每个mutation都有一个字符串的事件类型(ty
Action类似于mutation,不同在于:-Action提交的是mutation,而不是直接变更状态。-Action可以包含任意异步操作。Action函数接