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