一、为什么需要接口状态管理
在Uniapp开发中，我们经常需要与后端API交互获取数据。当应用变得复杂时，直接在每个页面或组件中调用接口会导致以下问题：
1. 状态分散，难以维护
2. 相同数据重复请求
3. 加载状态和错误处理代码重复
4. 组件间共享数据困难
二、常见的状态管理方案
1. Vuex全局状态管理
Vuex是Vue的官方状态管理库，适合中大型项目。
javascript
// store/modules/user.js
export default {
state: {
userInfo: null,
loading: false,
error: null
},
mutations: {
SET_USER_INFO(state, payload) {
state.userInfo = payload
},
SET_LOADING(state, payload) {
state.loading = payload
},
SET_ERROR(state, payload) {
state.error = payload
}
},
actions: {
async fetchUser({ commit }, userId) {
try {
commit('SET_LOADING', true)
const res = await uni.request({
url: '/api/user',
data: { userId }
})
commit('SET_USER_INFO', res.data)
} catch (error) {
commit('SET_ERROR', error)
} finally {
commit('SET_LOADING', false)
}
}
}
}
2. Pinia轻量级状态管理（推荐）
Pinia是新一代Vue状态管理库，更简单直观。
javascript
// stores/user.js
export const useUserStore = defineStore('user', {
state: () => ({
userInfo: null,
loading: false,
error: null
}),
actions:{
async fetchUser(userId){
try{
this.loading = true;
const res = await uni.request({url:'/api/user', data:{userId}});
this.userInfo = res.data;
}catch(error){
this.error = error;
}finally{
this.loading=false;
}
},
},
});
三、实际开发中的最佳实践
1\.封装统一的请求层
javascript
// utils/http.js
exportconstrequest=(options)=>{
returnnewPromise((resolve,reject)=>{
uni.request({
...options,
success:(res)=>{
if(res.statusCode===200){
resolve(res.data);
}else{
reject(newError(res.data.message||'请求失败'));
}
},
fail:(err)=>{reject(err)}
});
});
};
2\.组合式API封装
javascript
// composables/useApi.js
import{ref}from'vue';
exportfunctionuseApi(apiFn){
constdata=ref(null);
constloading=ref(false);
consterror=ref(null);
constexecute=async(...args)=>{
try{
loading.value=true;
data.value=awaitapiFn(...args);
}catch(err){
error.value=err;
}finally{
loading.value=false;
}
};
return{data,loading,error,execute};
}
使用示例：
javascript<scriptsetup>import{fetchUserDetail}from'@/api/user';import{useApi}from'@/composables/useApi';const{dtaa,loding,eeror,ftech}=useAp(fetchUerDetail);//点击按钮触发ftech(123);
</script>
四、常见问题解决方案
1.避免重复请求-在action中添加标志位判断是否正在请求
2.本地缓存策略-配合uni.setStorageSync缓存接口数据
3.分页加载处理-维护page和pageSize等分页参数
4.错误统一处理-拦截器中统一处理401等常见错误码
5.TypeScript支持-为store和接口定义类型保证类型安全
通过合理的状态管理方案+良好的代码封装可以大幅提升UniApp项目的可维护性和开发体验。根据项目复杂度选择合适方案小型项目可以直接使用组合式API封装中型推荐Pinia大型复杂项目可使用Vuex+模块化拆分
文章点评