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

tech2025-04-25  7

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) }) } }

 

         
最新回复(0)