vue 组件内获取actions的response方式

最近使用在学习使用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方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈vuex之mutation和action的基本使用

    浅谈vuex之mutation和action的基本使用

    我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1 一.mutation 在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,c

  • 基于axios 的responseType类型的设置方法

    responseType值的类型可为如下 axios请求下载导出一个文件,请求成功时返回的是一个流形式的文件,需要设置responseType: 'arraybuffer',但是请求失败的需要返回的是json数据, 所以需要把arraybuffer转成Json对象. 例: 请求设置了responseType: 'arraybuffer', 请求成功时,下载文件, 请求失败时,后端返回json对象,如:{"msg":"系统异常","code":1,

  • Vuex的actions属性的具体使用

    Vuex的actions属性的具体使用

    Vuex 的 action 属性内,可以定义异步操作逻辑,以满足某些业务场景要求.在组件内,是通过 $store.dispatch 来触发 action 定义的函数. 我们使用 action,来为计数器异步增 1. 1 Promise 方式 main.js: const store = new Vuex.Store({ state: { count: 0, }, mutations: { increment(state, n = 1) { state.count += n; } }, actio

  • Vue组件间通信 Vuex的用法解析

    Vue组件间通信 Vuex的用法解析

    上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过npm方式安装的: npm install vuex --save 安装好之后需要再main.js里全局引入: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)new Vue({el:'#app',store,components

  • vue 组件内获取actions的response方式

    最近使用在学习使用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((res

  • 详解Vue组件之间通信的七种方式

    使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下. 父子组件之间的通信 1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: ``` // 父组件 <template> <div> <h3>props和$emit</h3> <Children v-on:changeMsg="changeMsg"

  • 分享Vue组件传值的几种常用方式(一)

    分享Vue组件传值的几种常用方式(一)

    目录 前言 第一种:父向子传值 新建文件导入结构 引入 注册 使用子组件 子组件内部代码完善 父组件内部代码完善 操作main.js文件 思路总结 前言 大家好,这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路.最常见的vue组件传值分为三种,第一种是父向子传值,第二种是子向父传值,第三种是兄弟组件之间的传值,下面我们先就第一种情况来进行分析和编写. 第一种:父向子传值 父向子传值意思就是要把父组件里的值传递给子组件,方法是在子组件内部自定义一个props属性,通过props属性来完

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • 关于Vue组件间的常用传参方式

    关于Vue组件间的常用传参方式

    目录 组件间常用传参方式 1. props.emit(最常用的父子通讯方式) 2. 事件总线EventBus(常用任意两个组件之间的通讯) 3.Vuex状态管理 vue组件传参记录 几个不太常用的组件传值方法记载 parent / children 传参调用方法 eventBus这个自己安装下 provide/inject 组件间常用传参方式 1. props.emit(最常用的父子通讯方式) 父传子 父组件传入属性,子组件通过props接收,就可以在内部this.XXX的方式使用 // 父组件

  • vue组件间通信六种方式（总结篇）

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

  • 解析如何自动化生成vue组件文档

    解析如何自动化生成vue组件文档

    目录 一.现状 二.社区解决方案 2.1.业务梳理 三.技术方案 3.1.Vue文件解析 3.2.信息提取 3.2.1.可直接获取的信息 3.2.2.需要约定的信息 四.总结 五.展望 一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么的.该怎么用,还必须得再去翻看源码,或者压根就没注意到这个组件 的存在导致重复开发.这个时候就非常需要维护对应的组

  • Vuex 在Vue 组件中获得Vuex 状态state的方法

    Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个当前应用状态的快照. 在Vue组件中获得Vuex状态 Vuex的状态存储是相应式的.在Vue组件中获取Vuex状态总共有 五种 可行的方法. 1.从store实例中读取状态最简单的方法就是在计算属性中返回某个状态:(需要导入store组件) const Counter={ template:`<di

  • vue.js 子组件无法获取父组件store值的解决方式

    子组件: props:['myDetail'] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 子组件的参数值不会随着父组件store中参数值的改变而改变 修改为 父组件: data:{ detail:{} } methods:{ reloadDetail(){ this.detail=JSON.parse(JSON.s

  • vue组件之间通信方式实例总结【8种方式】

    本文实例总结了vue组件之间通信方式.分享给大家供大家参考,具体如下: 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的. Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <in

随机推荐