Skip to main content
Version: v2

Manage extra states

In the previous Cross Page/Module Update Response States chapter, we introduced how to update the response status across pages or modules, but in this chapter we It only introduces updating the data state returned by useRequest and useWatcher through updateState, the value of data is always consistent with the response data, but in many cases we will use additional states(such as state A) to display data, and After the request is successful, the data data is appended to the additional state A, such as the pagination scheme of pull-down loading. In this case, we need to manage the additional state A so that it can be updated across pages/modules.

Update a single state

Additional states can be managed via managedStates when called by the use hook, and automatically assigned the state name to update it when updateState is called in other modules/pages.

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

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

// manage allTodo as additional state
managedStates: {
allTodo
}
});
B.vue
const handleSuccess = () => {
// Pass in an object and specify the state name to look up
updateState('todoList', {
allTodo: allTodoData => {
// Add a new todo item
allTodoData.push({
title: 'new todo',
time: '10:00'
});
return allTodoData;
}
});
};

Update multiple states

In the above example, we implemented the update of a single allTodo state across pages. In fact, any number of states can be updated at the same time through the object description method of updateState.

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

It should be noted that the above 3 additional states need to be managed through the managedStates property before updating.

shorthand for data status update

When only updating the data state, you can directly pass in the callback function instead of specifying it as an object.

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

// The following are shorthand
updateState('todoList', dataRaw => {
//...
});