preface

Submitting mutation in VUex is the only way to change the state, and the process is synchronous; the asynchronous logic should be encapsulated in the action. One common operation for mutation/action is to pass on parameters, which is referred to as “submit payload” on the official website. This article was written in 2018 and recently moved to the nuggets, which may have some timeliness issues, but should not have much impact. We took the approach of splitting the VUex setup into different modules. The configurations in the state module are as follows

// state const state = {count: 0} export default state;Copy the code

Mutation and the cords

The unpretentious way is mutation.js

Mutation const mutations = {increment: (state,n) => {mutation. Count += n; mutation mutations = {increment: (state,n) => {mutation. } } export default mutations;Copy the code

Vue component (leaving out other code)

Methods: {add(){use this.store.com MIT ('increment',5); }}Copy the code

Object style submit parameter mutation.js

Mutation const mutations = {decrementa: (state,payload) => {state-count -= payment.amount; mutation mutations = {decrementa: (state,payload) => {state-count -= payment.amount; } } export default mutations;Copy the code

Vue components

Methods: {reducea(){use this.code.mit ({type: 'decrementa', amount: 5}); }},Copy the code

The action and transfer

Unpretentious action.js

/vuex action const Actions = {increment(context,args){context.com MIT ('increment',args); } } export default actions;Copy the code

mutation.js

Mutation const mutations = {increment: (state,n) => {state.count += n; } } export default mutations;Copy the code

Vue components

Methods: {adda(){// Trigger action this.$store.dispatch('increment',5); }}Copy the code

The object style is action.js

Decrementa (context,payload){context.com MIT (' contexmenta ',payload); } } export default actions;Copy the code

mutation.js

Mutation const mutations = {decrementa: (state,payload) => {state-count -= payment.amount; mutation mutations = {decrementa: (state,payload) => {state-count -= payment.amount; } } export default mutations;Copy the code

Vue components

methods: { reduceb(){ this.$store.dispatch({ type: 'decrementa', amount: 5 }); }}Copy the code

Action Indicates an asynchronous operation

Just to summarize the asynchronous operations of actions… Return promise action. Js

// Action const Actions in vuex = {asyncMul(Context,payload){// Return promise to the triggered store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit('multiplication',payload); resolve("async over"); }, 2000); }); } } export default actions;Copy the code

mutation.js

Mutations = {state. Count *= payment.amount; mutations = {state. Count *= payment.amount; } } export default mutations;Copy the code

Vue components

methods: { asyncMul(){ let amount = { type: 'asyncMul', amount: 5 } this.$store.dispatch(amount).then((result) => { console.log(result); }); }}Copy the code

Combine action Action.js in another action

// Action const Actions in vuex = {asyncMul(Context,payload){// Return promise to the triggered 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;Copy the code

mutation.js

Mutations = {state. Count *= payment.amount; mutations = {state. Count *= payment.amount; } } export default mutations;Copy the code

Vue components

methods: { actiona(){ let amount = { type: 'actiona', amount: 5 } this.$store.dispatch(amount).then((result) => { console.log(result); }); }}Copy the code

Use the async function action.js

// Action const Actions in vuex = {asyncMul(Context,payload){// Return promise to the triggered 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;Copy the code

mutation.js

Mutations = {state. Count *= payment.amount; mutations = {state. Count *= payment.amount; } } export default mutations;Copy the code

Vue components

methods: { actionb(){ let amount = { type: 'actionb', amount: 5 } this.$store.dispatch(amount).then(() => { ... }); }}Copy the code