前言
在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(() => { ... }); }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
