精通Vue.js系列 │ Vuex中的异步操作 - 网站源码_资源分享

原副标题：通晓Vue.js系列产品 │ Vuex中的触发器操作方式

Vuex中触发器操作方式

在库房的actions快捷键的姿势表达式中，能包涵触发器操作方式，比如下列actionA姿势表达式会触发器递交someMutation预览函数。

actions: { actionA ({ commit }) { returnnewPromise( ( resolve, reject) => { setTimeout( => { commit( someMutation) resolve }, 1000) }) } }

下列标识符在两个模块的方式忠发放actionA姿势表达式。

this.$store.dispatch( actionA).then( => { // 当actionA姿势表达式中的触发器操作方式继续执行完后，再继续执行then表达式选定的操作方式 … })

在库房的两个姿势表达式中还能发放另两个姿势表达式：

actions: { //… actionB ({ dispatch, commit }) {//actionB表达式发放actionA表达式 returndispatch( actionA).then( => { commit( someOtherMutation) }) } }

此外，还能通过async/await继续执行触发器操作方式，比如：

//假定getData和getOtherData返回Promise对象 actions: { asyncactionA( { commit }) { //async表明当前表达式包涵异步操作方式 commit( gotData, awaitgetData) }, asyncactionB( { dispatch, commit }) { awaitdispatch( actionA) //等待actionA的触发器操作方式继续执行完 commit( gotOtherData, awaitgetOtherData) } }

触发器姿势范例

下列位于src/main.js中的标识符创建了两个包涵actions快捷键的库房store，包括addQuantityAction和calculateAction姿势表达式。

conststore = createStore({ state { return{ item: { name: 苹果, price: 3.8, quantity: 1, total: 3.8 } } },

mutations: { addQuantity(state){ //增加购买数量state.item.quantity++},calculate(state){//计算总价格state.item.total=state.item.price * state.item.quantity}},

actions: { addQuantityAction({commit}){returnnewPromise( ( resolve)=> { setTimeout( //模拟触发器操作方式=>{commit( addQuantity) resolve }, 2000) })},

calculateAction({commit,dispatch}){//等购买数量增加后，再计算总价格 dispatch( addQuantityAction).then( => { commit( calculate) })}}})

以上标识符中的姿势表达式的作用如下。

（1）addQuantityAction姿势表达式：包涵触发器操作方式，过2秒后递交addQuantity预览表达式。

（2）calculateAction动作表达式：会发放addQuantityAction姿势表达式，等到addQuantityAction姿势表达式的触发器操作方式继续执行完以后，再继续执行then表达式，从而递交calculate预览表达式。

例程1的AsyncJudge.vue定义了AsyncJudge模块，它的calculate方式会向库房发放calculateAction姿势表达式。

■例程1 AsyncJudge.vue

< template> < div> <p> 商品名字: {{item.name}} </ p> < p> 单价: {{item.price}} </ p> < p> 数量: {{item.quantity}} < button@ click= “calculate”>增加 </ button> </ p> < p> 总价：{{item.total}} </ p> </ div> </ template> < > import{ mapState,mapActions } fromvuex

exportdefault{ computed: mapState([ item]), methods: { …mapActions({ calculate: calculateAction}) }}</ >

在src/router/index.js中，为AsyncJudge模块设置的路由的路径为judge。通过浏览器访问http://localhost:8080/#/judge，会出现如图1所示的网页。在网页上单击“增加”按钮，就会看到在延迟2秒后，{{item.quantity}}及{{item.total}}的取值会发生相应的预览。

■图1 AsyncJudge模块的页面

使用async/await的范例

下列位于src/main.js中的标识符创建了两个包涵actions快捷键的库房store，包括两个loadCustomerAction姿势表达式，该姿势表达式用async标识，表明是包涵触发器操作方式的表达式。

conststore = createStore({ state {return{ customer: , msg: }},

mutations: {clearCustomer(state){state.msg= 正在查询…state.customer= },loadCustomer(state,response){if(response.data !== null){ state.customer=response.datastate.msg= } elsestate.msg= 未找到匹配的数据！}},

actions: {asyncloadCustomerAction( {commit},id) { commit( clearCustomer) constresponse= awaitaxios({ baseURL: http://www.javathinker.net, url: /customer, method: get, params: {id: id} })commit( loadCustomer,response) }}})

loadCustomerAction姿势表达式会通过Axios请求访问服务器，查询与id匹配的customer对象。在触发器调用axios表达式之前，会递交clearCustomer预览表达式，等到Axios的触发器请求继续执行完，再递交loadCustomer预览表达式。

例程2的AsyncCustomer.vue定义了AsyncCustomer模块。它的getCustomer方式会向库房发放loadCustomerAction姿势表达式。

■例程2 AsyncCustomer.vue

< template> < div> < p>输入id: < inputv-model= “id”/> < button@ click= “getCustomer”> 查询 </ button> {{msg}} </ p> < p> {{customer}} </ p> </ div></ template> < > import{mapState} fromvuexexportdefault{ data{ return{ id: }}, computed: mapState([ customer,msg]), methods: { getCustomer{this.$store.dispatch( loadCustomerAction, this.id).then( => { console.log( this.customer)} )}}}</ >

在src/router/index.js中，为AsyncCustomer模块设置的路由的路径为cust。通过浏览器访问http://localhost:8080/#/cust，会出现如图2所示的网页。在网页上的id输入框输入1，再单击“查询”按钮，会看到网页先显示“正在查询…”，延迟一段时间后，再显示id为1的customer对象的信息。