uni-app(vue)中使用Vuex的action封装和发送请求

男娘i 2022-12-03 13:29 181阅读 0赞

### 1.封装请求 [可参考我之前的文章][Link 1] ###

### 2.创建一个文件 api.js 封装具体的请求 ###

// 导入封装的请求
    import request from '@/utils/request.js'
    
    // 导出
    export function reqDataList(id){ // 资讯列表
    	return request({
    	  url: 'mv1/list?id=' + id,
    		method: 'get'
    	 })
    }

### 3.vuex ###

import {reqDataList} from '@/api/api.js' // 引入第二步中导出的方法
    
    const state = {
    	id: ''
    }
    
    const mutations = {
    	id(state, data){
    		state.id = data
    	}
    }
    
    const actions = {
      reqDataList({ commit },data){
    		const { subject_id } = data // 解构
    		return new Promise((resolve,reject) => {
    			reqDataList(data).then(res => {
    				let data = res.data.id
    				commit('id', data) // 提交更改 或 this.commit('id', data)
    				resolve(res)
    			}).catch(err => {
    				reject(err)
    			})
    		})
    	}
    }

### 4.页面中调用 ###

methods: {
    	getList(){
    		let data = 18 //dispatch 第一个参数是vuex请求路径+ vuex中action中的方法名
    		this.$store.dispatch('user/reqDataList', data).then(res => {
    			console.log(res)
    		})
    	}
    }

[Link 1]: https://blog.csdn.net/qq_41956789/article/details/104016437

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX发送网络请求-封装AJAX-Fetch发送网络请求

文章目录 1.AJAX网络请求 1.1 AJAX发送请求 1.2 XHR的状态 1.3 XHR

秒速五厘米/ 2023年09月28日 13:49/ 0 赞/ 25 阅读

相关深入Vuex的Actions

1.什么是actions？（操作mutation）背景：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但

拼搏现实的明天。/ 2023年06月07日 10:50/ 0 赞/ 10 阅读

相关 uni-app(vue)中使用Vuex的action封装和发送请求

1.封装请求 [可参考我之前的文章][Link 1] 2.创建一个文件 api.js 封装具体的请求 // 导入封装的请求 import reque

男娘i/ 2022年12月03日 13:29/ 0 赞/ 182 阅读

相关 Vuex的使用（八）——actions和mapActions的用法

参考文档：https://vuex.vuejs.org/zh/guide/ actions功能与mutations相近，区别主要有以下两点： 1. actions不能直接

快来打我*/ 2022年09月10日 14:18/ 0 赞/ 176 阅读

相关封装js发送http请求

封装js发送http请求 var http = {}; http.quest = function (option, callback) {

「爱情、让人受尽委屈。」/ 2022年06月17日 03:37/ 0 赞/ 244 阅读

相关 Ajax 向同一个action发送多次请求

　　Ajax，默认是异步请求。所谓异步就是，不会去等待服务器做出响应后再去执行别的请求，所谓同步就是，客户端一次请求，服务端一次响应，响应结束后才会发送下次请求，然后下次响应。

迷南。/ 2022年06月01日 03:58/ 0 赞/ 236 阅读

相关使用 Vuex + axios 发送请求

Vue 原本有一个官方推荐的 ajax 插件 [vue-resource][]，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource 目前主流的

妖狐艹你老母/ 2022年05月17日 00:15/ 0 赞/ 239 阅读

相关 Vue之Vuex的getters和actions的使用

继前文[《Vue之Vuex(状态管理模式)》][Vue_Vuex]，在store.js添加getters和actions方法： import Vue from 'vu

╰半夏微凉°/ 2022年04月18日 00:49/ 0 赞/ 404 阅读

相关 vuex中的actions

actions用来处理mutations中的异步操作，触发mutations中的函数 1. 组件中触发actions中的函数：此处用dispatch触发函数 this.$s

╰半夏微凉°/ 2022年02月26日 06:06/ 0 赞/ 285 阅读

相关 vuex—2muation和action

接上节加上payload ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

ゝ一纸荒年。/ 2022年01月21日 03:41/ 0 赞/ 218 阅读