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' }">
<!-- Navegação -->
<nav>
<button @click="estado = 'home'">Home</button>
<button @click="estado = 'sobre'">Sobre</button>
<button @click="estado = 'contato'">Contato</button>
</nav>
<!-- Seções da Página -->
<section x-show="estado === 'home'">
<h1>Bem-vindo à Home</h1>
<p>Esta é a seção de início da página.</p>
</section>
<section x-show="estado === 'sobre'">
<h1>Sobre Nós</h1>
<p>Informações sobre a nossa empresa.</p>
</section>
<section x-show="estado === 'contato'">
<h1>Contato</h1>
<p>Informações de contato e formulário.</p>
</section>
</div>-
Definindo o Estado: No atributo
x-data, declaramos uma propriedade chamadaestadoe a inicializamos com o valor'home', indicando que, ao carregar a página, o estado inicial seráhome. -
Transições de Estado: Cada botão no
<nav>usa@click="estado = '...'para atualizar o estado atual quando clicado. Assim, ao clicar no botãoSobre, o estado é alterado para'sobre', e a seçãoSobreserá exibida. -
Controle de Visibilidade com
x-show: Cada<section>usax-show="estado === '...'para determinar se deve ser exibida ou não com base no estado atual. A seçãoHomeserá visível apenas quandoestadofor'home', e assim por diante para as outras seções.
Esse padrão permite que a lógica de exibição da página seja controlada com transições de estado simples, tornando o comportamento previsível e facilitando a manutenção da interface.
Vamos criar um exemplo de máquina de estado onde, ao entrar em uma <section>, você ganha novas opções de estado, simulando um sistema de navegação em "subseções".
Neste exemplo, teremos três seções principais (Home, Sobre e Contato). Quando acessarmos a seção Sobre, ela nos oferecerá duas opções adicionais: Missão e Equipe, que são subseções dentro de Sobre.
<div x-data="{ estado: 'home', subEstado: null }">
<!-- Navegação Principal -->
<nav>
<button @click="estado = 'home'; subEstado = null">Home</button>
<button @click="estado = 'sobre'; subEstado = null">Sobre</button>
<button @click="estado = 'contato'; subEstado = null">Contato</button>
</nav>
<!-- Seções Principais -->
<section x-show="estado === 'home'">
<h1>Bem-vindo à Home</h1>
<p>Esta é a seção de início da página.</p>
</section>
<section x-show="estado === 'sobre'">
<h1>Sobre Nós</h1>
<p>Informações sobre a nossa empresa.</p>
<!-- Navegação de Subseções -->
<div>
<button @click="subEstado = 'missao'">Missão</button>
<button @click="subEstado = 'equipe'">Equipe</button>
</div>
<!-- Subseção: Missão -->
<div x-show="subEstado === 'missao'">
<h2>Missão</h2>
<p>Nossa missão é melhorar o mundo através de nossa empresa.</p>
</div>
<!-- Subseção: Equipe -->
<div x-show="subEstado === 'equipe'">
<h2>Equipe</h2>
<p>Conheça nossa equipe dedicada de profissionais.</p>
</div>
</section>
<section x-show="estado === 'contato'">
<h1>Contato</h1>
<p>Informações de contato e formulário.</p>
</section>
</div>-
Definindo os Estados: No
x-data, temos duas propriedades:estadocontrola a seção principal (home,sobreoucontato).subEstadocontrola subseções dentro da seçãosobree énullpor padrão.
-
Transições de Estado Principal: Cada botão de navegação altera o
estadopara a seção desejada (home,sobreoucontato) e redefinesubEstadoparanull, para evitar subseções abertas ao sair da seção principal. -
Transições de SubEstado: Dentro da seção
Sobre, temos dois botões (MissãoeEquipe). Ao clicar nesses botões,subEstadoé atualizado com o valor'missao'ou'equipe', exibindo a subseção apropriada. -
Controle de Visibilidade: Usamos
x-showpara exibir as seções principais com base emestadoe as subseções com base emsubEstado. Seestadonão for'sobre', as subseções (MissãoeEquipe) não aparecem, mantendo o controle centralizado.
Esse padrão permite uma navegação condicional e organizada, com subseções dependentes da seção principal, simulando uma máquina de estado hierárquica em AlpineJS.