管理额外的状态

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

更新单个状态

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

vue composition

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

react

A.jsx

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

  const [allTodo, setAllTodo] = allTodoState = useState([]);
  useRequest(todoList, {
    // ...

    // 将allTodo作为额外的状态进行管理
    managedStates: {
      allTodo: allTodoState
    }
  });

  return (
    // ...
  );
}

B.jsx

const PageB = () => {
  // ...
  const handleSuccess = () => {
    // 传入一个对象并指定状态名来查找
    updateState('todoList', {
      allTodo: allTodoData => {
        // 新增一条todo项
        allTodoData.push({
          title: 'new todo',
          time: '10:00'
        });
        return allTodoData;
      }
    });
  };

  return (
    // ...
  );
}

svelte

A.svelte

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

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

  // 将allTodo作为额外的状态进行管理
  managedStates: {
    allTodo
  }
});

B.svelte

const handleSuccess = () => {
  // 传入一个对象并指定状态名来查找
  updateState('todoList', {
    allTodo: allTodoData => {
      // 新增一条todo项
      allTodoData.push({
        title: 'new todo',
        time: '10:00'
      });
      return allTodoData;
    }
  });
};

vue options

说明

不支持管理额外状态。

更新多个状态

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

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

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

data 状态更新的简写

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

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

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