时间:2021-05-26
最近使用在学习使用vuex,想利用vuex集中管理状态。在和后台进行数据交互的时候,必然会涉及接口的调用,此类异步操作,通常写在action里面:
import Vue from 'vue';import Vuex from 'vuex';Vue.use('Vuex');const actions = { getComplete ({}) { return new Promise((resolve, reject) => { Vue.http.get('XXXXXX').then((response) => { resolve(response); }).catch((response) => { reject(response); }); }); } }export default new Vuex.Store({ actions})这里将接口的请求放置在promise中,利用promise异步的特性,可以在子组件中获取到接口调用成功后返回的参数:
export default { ...... created: function() { this.$store.dispatch('getComplete').then(response => { ...... }).catch(response => { ...... }) }}除了这种方式,也可以使用mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store),具体使用方式详见:
传送门:https://vuex.vuejs.org/en/actions.html
以上这篇vue 组件内获取actions的response方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue动态创建组件实例并挂载到body方式一importVuefrom'vue'/***@paramComponent组件实例的选项对象*@paramprops
react获取input输入框的值的多种方式第一种方式非受控组件获取第二种方式受控组件获取非受控组件获取refimportReact,{Component}fr
本文实例讲述了vue组件数据传递、父子组件数据获取,slot,router路由功能。分享给大家供大家参考,具体如下:一、vue默认情况下,子组件也没法访问父组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用newvue(el:”)在每个页面内指定一个容器元素这种方式在很多中小规模的项目中
前言Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。首先用vue-cli创建一个项目,其