uniapp封装请求（uni.request）与vuex进行状态管理

 有段时间没有用过vue、vuex以及uniapp了，避免手生，于是便写下如下一个小demo。

 

1.创建一个发送请求的js文件（http.js）

export default async function http({url,data,method="POST"}){
	let baseUrl= 'https:/***.bspapp.com'//这里用的uni免费的云函数URL
	return new Promise((resolve,reject)=>{//使用Promise返回数据
		uni.request({
			url:baseUrl+url,
			method,
			data,
			success(res) {
				resolve(res.data)
			},
			fail(err) {
				reject(err)
			}
		})
	})
}

2.配置一个请求的js文件（fetch.js）

import http from "../http/index.js"

export async function fetchTags() {
	return  http({
		url:'/getTags',
		data:{}
	})
}

上述两个文件目录如图所示：

我在这里采取使用VueX这个状态管理工具进行对数据进行处理与收集，多年的代码经验告诉我，使用状态管理对数据进行管理，后期对业务进行维护时会非常方便。

3.开启vuex状态管理

创建store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);//vue的插件机制

// 导入数据请求的方法
import { fetchTags } from '../util/fetch/index.js'

//Vuex.Store 构造器选项
const store = new Vuex.Store({
    state:{//存放状态
		"tabList":[]
    },
	mutations:{
		getTab(state){
			//将数据存入store中 当state中tabList有数据时不发请求，避免重复请求
			state.tabList.length || fetchTags().then(res=> state.tabList = res) 
		}
	}
})
export default store

4.在main.js中导入store以用来使用vuex

 5.在需要使用数据的vue页面中获取vuex中的数据

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex' //引入mapMutations方法与mapState数据

    export default {
		data() {
			return {
			}
		},
        created() {
			this.getTab()
        },
		computed: {
			...mapState({
				tabList: state => state.tabList,
			})
		},
		methods: {
			...mapMutations(['getTab'])
		}
	}

</script>

 如图所示，数据确实进入vuex中了。