Uma máquina de estados é um modelo de design que organiza a lógica de um sistema em "estados" finitos, onde o sistema pode estar em apenas um estado por vez. Cada estado define o comportamento do sistema e permite transições para outros estados, geralmente com condições específicas. As máquinas de estado são usadas para representar fluxos e interações previsíveis, como etapas de um formulário, navegação em uma interface ou processos de login.
Vamos criar um exemplo em que uma página exibe seções diferentes (<section>) com base em um estado. Vamos supor que temos três seções: Home, Sobre e Contato, e usaremos AlpineJS para controlar a exibição de cada seção com uma máquina de estado simples.
<div x-data="{ estado: 'home' }">