跳到主要内容
版本:v2

管理额外的状态

在之前的跨页面/模块更新响应状态章节中,介绍了如何跨页面或模块更新响应状态,但在此章节中我们只介绍了通过updateState更新在useRequestuseWatcher中返回的data状态,data 的值总是和响应数据一致,但在很多情况下我们会使用额外的状态来展示(如状态 A)数据,并在请求成功后将 data 数据附加到额外的状态 A 中,如下拉加载的分页方案。在这种情况下,我们就需要将额外的状态 A 进行管理,便于实现跨页面/模块更新它。

更新单个状态

可以在 use hook 调用时通过managedStates管理额外的状态,并在其他模块/页面中调用updateState时,自动指定状态名称来更新它。

A.vue
const todoList = page =>
alova.Get('/todo', {
name: 'todoList'
});

const allTodo = ref([]);
useRequest(todoList, {
// ...

// 将allTodo作为额外的状态进行管理
managedStates: {
allTodo
}
});
B.vue
const handleSuccess = () => {
// 传入一个对象并指定状态名来查找
updateState('todoList', {
allTodo: allTodoData => {
// 新增一条todo项
allTodoData.push({
title: 'new todo',
time: '10:00'
});
return allTodoData;
}
});
};

更新多个状态

在上面的例子中我们实现了跨页面对单个allTodo状态进行更新,实际上,通过updateState的对象描述方式可以同时更新任意多个状态。

updateState('todoList', {
state1: state1Data => {
// ...
},
state2: state2Data => {
// ...
},
state3: state3Data => {
// ...
}
// ...
});

需要注意的是,以上 3 个额外的状态在更新前,需要通过managedStates属性来管理起来。

data 状态更新的简写

当只更新 data 状态时,可以直接传入回调函数即可,而不需要指定为对象。

updateState('todoList', {
data: dataRaw => {
// ...
}
});

// 以下为简写
updateState('todoList', dataRaw => {
// ...
});